Grid system
Basic example
grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together.
The above example creates three equal-width columns across all devices and viewports using
our predefined grid classes. Those columns are centered in the page with the parent
.container.
Container
The grid system requires a containing element to wrap site contents and house our grid system. Without a container, the grid won't work properly.
Row
Rows create horizontal groups of columns. Therefore, if you want to split your layout horizontally,
use
.row.
Columns
The grid system allows up to 12 columns across the page.
Grid options
The grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follow:
- Extra small
(xs) - Small
(sm) - Medium
(md) - Large
(lg) - Extra large
(xl) - Extra extra large
(xxl)
Grid changes across the folowing breakpoints:
xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
|---|---|---|---|---|---|---|
Container max-width |
None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Class prefix | .col- |
.col-sm |
.col-md |
.col-lg |
.col-xl |
.col-xxl |
| # off columns | .col- |
|||||
| Gutter width | 1.5rem (.75rem on left and right) | |||||
| Custom gutters | Yes | |||||
| Nestable | Yes | |||||
| Column ordering | Yes | |||||
Auto-layout columns
Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered
class like .col-sm-6.
Equal-width
There are two gird layouts that apply to every device and viewport, from xs to
xxl. Add any number of unit-less classes for each breakpoint you need and every column
will be the same width.
Setting one column width
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it.
Variable width content
Use col-{breakpoint}-auto classes to size columns based on the natural width of their
content.
Responsive classes
All breakpoints
For grids that are the same from the smallest of devices to the largest, use the
.col and .col-* classes. Specify a numbered class when you need a
particularly sized column; otherwise, feel free to stick to .col.
Variable width content
Use col-{breakpoint}-auto classes to size columns based on the natural width of their
content.
Stacked to horizontal
Using a single set of .col-sm-* classes, you can create a basic grid system that
starts out stacked and becomes horizontal at the small breakpoint (sm).
Mix and match
Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
Mix and match
Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
Nesting
To nest your content with the default grid, add a new .row and set of
.col-sm-* columns within an existing .col-sm-* column. Nested rows should
include a set of columns that add up to 12 or fewer (it is not required that you use all 12
available columns).