BS Grid System
Bootstrap Grid System
Bootstrap’s grid design supports up to 12 columns per page.
If you don’t want to use all 12 columns separately, you can join them together to make larger columns:
Bootstrap’s grid system is responsive, and the columns re-arrange based on the screen size. On a large screen, the content may appear better ordered in three columns, but on a tiny screen, the content elements should be layered on top of one another.
Remember that grid columns should sum up to twelve per row. Columns will stack regardless of the viewport.
Grid Classes
The Bootstrap grid system includes four classes:
- XS (for phones with displays less than 768px wide)
- sm (for tablets with screens equal to or more than 768 pixels wide)
- md (for small computers with screens equal to or more than 992 pixels wide)
- lg (for laptops and desktops with screens equal to or more than 1200 pixels wide)
The classes listed above can be combined to produce more dynamic and adaptable layouts.
Tip: Because each class scales up, you can define the same widths for xs and sm by specifying only xs.
Grid System Rules
Here are some Bootstrap grid system rules:
- To ensure proper alignment and padding, rows must be placed within a .container (fixed-width) or .container-fluid (full-width).
- Use rows to make horizontal groups of columns.
- Content should be inserted within columns, and only columns can be instantaneous. Children of Rows
- Grid layouts can be readily created using predefined classes such as .row and .col-sm-4.
- Columns use padding to generate gutters (gaps between columns). That padding is offset in rows for the first and last column using a negative margin on .rows.
- Grid columns are formed by selecting how many of the 12 available columns you want to span. For instance, three equal columns would require three .col-sm-4.
- Column widths are percentage-based, meaning they are constantly flexible and sized relative to their parent element.
Basic Structure of a Bootstrap Grid
The following is the fundamental structure of a Bootstrap grid:
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
</div>
To construct the desired layout, create a container (<div class=”container”>). Next, add a row (<div class=”row”>). Then, include the necessary number of columns (tags with the appropriate .col-*-* classes). Remember that the numbers in .col-*-* should always add up to 12 for each row.
Grid Options
The table below summarizes how the Bootstrap grid structure works across several devices.
| Extra small <768px |
Small >=768px |
Medium >=992px |
Large >=1200px |
|
|---|---|---|---|---|
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| # of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
