Bootstrap includes a responsive, mobile first fluid grid system. Grid systems are typically used for creating page layouts through a series of rows and columns that house the content. The Bootstrap grid system includes an arrangement of <div> containers with predefined classes that can be scaled up to 12 columns in each row as the device or viewport size increases.
Each row has a class equal to row and each column has a class that starts with "col-md-" followed by a number from 1 to 12. This integer corresponds to the number of columns that this container will occupy in the row. The total column numbers in a single row cannot exceed 12.
Here's an example of how the Bootstrap grid system could be laid out:
<div class=”row”> <div class=”col-md-6”></div> <div class=”col-md-3”></div> <div class=”col-md-3”></div> </div> <div class=”row”> <div class=”col-md-4”></div> <div class=”col-md-4”></div> <div class=”col-md-4”></div> </div> <div class=”row”> <div class=”col-md-1”></div> <div class=”col-md-1”></div> <div class=”col-md-1”></div> <div class=”col-md-1”></div> <div class=”col-md-1”></div> <div class=”col-md-1”></div> <div class=”col-md-1”></div> <div class=”col-md-1”></div> <div class=”col-md-1”></div> <div class=”col-md-1”></div> <div class=”col-md-1”></div> <div class=”col-md-1”></div> </div> |
Corresponds to:
col-md-6 |
col-md-3 |
col-md-3 |
|||||||||
col-md-4 |
col-md-4 |
col-md-4 |
|||||||||
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
col-md-1 |
The following are some best practices for working with the fluid grid system:
•Use rows to create horizontal groups of columns.
•Content should be placed within columns, and only columns may be immediate children of rows.
•Grid columns are created by specifying the number out of twelve available columns you wish that column to span. For example, three equal columns would use three ( col-md-3 ).
More information about Bootstrap’s grid system, refer to http://getbootstrap.com/css/#grid-options.
