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.