The grid is 12 columns and percentage-based. The number of columns a container spans can be adjusted across breakpoints for responsive layouts. The grid system works with a variety of layout utilities to achieve different results.
## Float based grid
Use `.clearfix` on the container and float utilities with columns for a floated grid layout.
```html live title="Float based grid"
<divclass="container-lg clearfix">
<divclass="col-4 float-left border p-4">
My column
</div>
<divclass="col-4 float-left border p-4">
Looks better
</div>
<divclass="col-4 float-left border p-4">
Than your column
</div>
</div>
```
### Reversed grid
To reverse the order of columns, use `float-right` to float columns to the right.
```html live title="Float grid reversed"
<divclass="container-lg clearfix">
<divclass="col-4 float-right border p-4">
One
</div>
<divclass="col-4 float-right border p-4">
Two
</div>
<divclass="col-4 float-right border p-4">
Three
</div>
</div>
```
## Nesting
You can infinitely nest grid layouts within other columns since the column widths are percentage based. With great flexibility comes great responsibility - be sensible with how far you nest!
```html live title="Nesting grids"
<divclass="clearfix">
<divclass="col-6 float-left px-1">
<divclass="border p-1">Unnested</div>
</div>
<divclass="col-6 float-left">
<divclass="clearfix">
<divclass="col-6 float-left px-1">
<divclass="border p-1">1 x Nested</div>
</div>
<divclass="col-6 float-left">
<divclass="col-6 float-left px-1">
<divclass="border p-1">2 x Nested</div>
</div>
<divclass="col-6 float-left px-1">
<divclass="border p-1">2 x Nested</div>
</div>
</div>
</div>
</div>
</div>
```
## Centering a column
Use `.mx-auto` to center columns within a container.
```html live title="Centering a column"
<divclass="border">
<divclass="col-6 p-2 mx-auto border">
This column is the center of my world.
</div>
</div>
```
## Column widths
Column widths can be used with any other block or inline-block elements to add percentage-based widths.
Use gutter styles or padding utilities to create gutters. You can use the default gutter style, `gutter`, or either of its modifiers, `gutter-condensed` or `gutter-spacious`. Gutter styles also support responsive breakpoint modifiers. Gutter styles add padding to the left and right side of each column and apply a negative margin to the container to ensure content inside each column lines up with content outside of the grid.
```html live title="Gutters"
<divclass="clearfix gutter-md-spacious border">
<divclass="col-3 float-left">
<divclass="border p-3">.col-md-3</div>
</div>
<divclass="col-3 float-left">
<divclass="border p-3">.col-md-3</div>
</div>
<divclass="col-3 float-left">
<divclass="border p-3">.col-md-3</div>
</div>
<divclass="col-3 float-left">
<divclass="border p-3">.col-md-3</div>
</div>
</div>
```
Use padding utilities to create gutters for more customized layouts.
```html live title="Gutters with padding"
<divclass="container-lg clearfix">
<divclass="col-3 float-left pr-2 mb-3">
<divclass="border bg-gray-light">.pr-2</div>
</div>
<divclass="col-3 float-left px-2 mb-3">
<divclass="border bg-gray-light">.px-2</div>
</div>
<divclass="col-3 float-left px-2 mb-3">
<divclass="border bg-gray-light">.px-2</div>
</div>
<divclass="col-3 float-left pl-2 mb-3">
<divclass="border bg-gray-light">.pl-2</div>
</div>
</div>
<divclass="container-lg clearfix">
<divclass="col-3 float-left pr-2">
<divclass="border bg-gray-light">.pr-2</div>
</div>
<divclass="col-9 float-left pl-2">
<divclass="border bg-gray-light">.pl-2</div>
</div>
</div>
```
## Inline-block grids
Use column widths with `d-inline-block` as an alternative to floated grids.
```html live title="Inline-block grid"
<div>
<divclass="col-4 d-inline-block border">
.col-4 .d-inline-block
</div>
<!--
-->
<divclass="col-4 d-inline-block border">
.col-4 .d-inline-block
</div>
<!--
-->
<divclass="col-4 d-inline-block border">
.col-4 .d-inline-block
</div>
</div>
```
You can use column widths and other utilities on elements such as lists to create the layout you need while keeping the markup semantically correct.
This can be useful for keeping columns the same height, justifying content and vertically aligning items. The flexbox grid is also great for working with responsive layouts.
All the column width classes can be set per breakpoint to create responsive grid layouts. Each responsive style is applied to the specified breakpoint and up.
### Breakpoints
We use abbreviations for each breakpoint to keep the class names concise.
| Shorthand | Description |
| --------- | ----------------- |
| sm | min-width: 544px |
| md | min-width: 768px |
| lg | min-width: 1004px |
| xl | min-width: 1280px |
**Note:** The `lg` breakpoint matches our current page width of `980px` including left and right padding of `12px`. This is so that content doesn't touch the edges of the window when resized.
<hr/>
In this example at the `sm` breakpoint 2 columns will show, at the `md` breakpoint 4 columns will show, and at the `lg` breakpoint 6 columns will show.
For demonstration, this is how the above example would look at the `sm` breakpoint.
```html live title="Responsive grid small"
<divclass="container-lg clearfix">
<divclass="col-sm-6 float-left p-2 border">
.col-sm-6
</div>
<divclass="col-sm-6 float-left p-2 border">
.col-sm-6
</div>
<divclass="col-sm-6 float-left p-2 border">
.col-sm-6
</div>
<divclass="col-sm-6 float-left p-2 border">
.col-sm-6
</div>
<divclass="col-sm-6 float-left p-2 border">
.col-sm-6
</div>
<divclass="col-sm-6 float-left p-2 border">
.col-sm-6
</div>
</div>
```
This is how that same example would look at the `md` breakpoint.
```html live title="Responsive grid medium"
<divclass="container-lg clearfix">
<divclass="col-md-3 float-left p-2 border">
.col-md-3
</div>
<divclass="col-md-3 float-left p-2 border">
.col-md-3
</div>
<divclass="col-md-3 float-left p-2 border">
.col-md-3
</div>
<divclass="col-md-3 float-left p-2 border">
.col-md-3
</div>
<divclass="col-md-3 float-left p-2 border">
.col-md-3
</div>
<divclass="col-md-3 float-left p-2 border">
.col-md-3
</div>
</div>
```
This is how that example would look at the `lg` breakpoint.
```html live title="Responsive grid large"
<divclass="container-lg clearfix">
<divclass="col-lg-2 float-left p-2 border">
.col-lg-2
</div>
<divclass="col-lg-2 float-left p-2 border">
.col-lg-2
</div>
<divclass="col-lg-2 float-left p-2 border">
.col-lg-2
</div>
<divclass="col-lg-2 float-left p-2 border">
.col-lg-2
</div>
<divclass="col-lg-2 float-left p-2 border">
.col-lg-2
</div>
<divclass="col-lg-2 float-left p-2 border">
.col-lg-2
</div>
</div>
```
## Containers
Container widths match our breakpoints and are available at a `sm`, `md`, `lg`, and `xl` size. Containers apply a max-width rather than a fixed width for responsive layouts, and they center the container.
