Simplified Grid in Bermuda

Grid layout is very useful in responsive design of UI. Bermuda provides the responsive Simplified Grid layouts.
Bermuda provides grid layout upto four colums. The classnames are very simple.
For ex. For grid with 3 columns we only need to add to classes to our container grid-container col-3 and that's it our responsive grid layout with three columns is ready.

Single Column Grid

Single Column Grid 
                    
                     
                        <div class="grid-container col-1">
                          <div class="bg-primary">Single Column Grid</div>
                        </div>

Two Columns Grid

Two Columns Grid
Two Columns Grid 
                    
                      
                        <div class="grid-container col-2">
                          <div class="bg-primary">Two Columns Grid</div>
                          <div class="bg-default">Two Columns Grid</div>
                        </div>

Three Columns Grid

Three Columns Grid
Three Columns Grid
Three Columns Grid 
                    
                      
                        <div class="grid-container col-3">
                          <div class="bg-primary">Three Columns Grid</div>
                          <div class="bg-default">Three Columns Grid</div>
                          <div class="bg-primary">Three Columns Grid</div>
                        </div>

Four Columns Grid

Four Columns Grid
Four Columns Grid
Four Columns Grid
Four Columns Grid 
                    
                      
                        <div class="grid-container col-4">
                          <div class="bg-primary">Four Columns Grid</div>
                          <div class="bg-default">Four Columns Grid</div>
                          <div class="bg-primary">Four Columns Grid</div>
                          <div class="bg-default">Four Columns Grid</div>
                        </div>

Note: To check the responsiveness of the grids resize your window.

  Toast
Home