Bootstrap 3 Grid System
Bootstrap grids are the easiest way to create layouts.
Grid systems enable you to create advanced layouts using rows and columns. The Bootstrap grid system can have up to 12 columns, and you can specify how these columns scale for different viewport sizes.
Here's an example of a Bootstrap grid:
The numbers at the end of each class name represent the number of columns that the column spans. So .col-xs-1 spans one column and .col-xs-8 spans eight. The xs means that the colspan applies to extra small devices and everything above (in other words, all devices). You can also use sm, md, and lg for small, medium, and large respectively (more on these below).
Here's the code for the above grid:
The above example should look the same in all device sizes. This is because we specify xs for "extra small" in the class names.
Stacked to Horizontal
The following example uses the same markup, but this time we use md for "medium". This means that, if the viewport is smaller than "medium" (i.e. less than 992 pixels), the cells in the grid will be stacked on top of each other, and each cell will take up the full width.
If you are viewing this on a wide screen, this example might not look any different to the previous one. However, if you resize your browser down, the cells will eventually shift into the stacked position (and the previous example will remain intact).
Grid Sizes
The following table shows how different grid options work with different viewport sizes.
| Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | |
|---|---|---|---|---|
| Grid behavior | Horizontal at all times | Collapsed to start, horizontal above breakpoints | ||
| Container width | None (auto) | 750px | 970px | 1170px |
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Number of columns | 12 | |||
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | |||
| Nestable | Yes | |||
| Offsets | Yes | |||
| Column ordering | Yes | |||
Things to Remember with Grids
Containers
Grids should be placed within a container (i.e. using either .container class or the .container-fluid class) for proper padding and alignment.
Rows & Columns
Rows contain one or more columns. Columns contain the content. Only columns can be immediate children of rows.
Padding
Columns contain padding. However, the padding on the first and last columns is offset by a negative margin on the row. This is why the above examples are outdented — it is so the content within the grid lines up with content outside the grid.
More than 12 Columns per Row?
If more than 12 columns are placed in a row, the columns will wrap to a new line. That is, columns will wrap as a group. So for example, if a row contains a col-md-10 and a col-md-3, the whole col-md-3 will wrap to the new line.
Less than 12 Columns per Row?
You don't have to use up all 12 columns. You can use any number of columns up to 12 (before it will wrap to the next line). For example, you could have a row where the total column count spans say, 3 columns.
Grid Classes
Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. So using any .col-sm-* class will affect not only small viewports, but also medium and large (unless there's also a col-md-* and/or col-lg-* present).
Multiple Classes
You can use multiple class sizes for a given element. For example, you could use class="col-sm-10 col-md-6" to specify 10 columns for small viewports and 6 columns for medium and large viewports.