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.
.clearfix on the container and float utilities with columns for a floated grid layout.
To reverse the order of columns, use
float-right to float columns to the right.
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!
.mx-auto to center columns within a container.
Column widths can be used with any other block or inline-block elements to add percentage-based widths.
<div> <div class="col-4 float-right p-2 border text-red"> <%= octicon "heart" %> Don't go bacon my heart. </div> <p>T-bone drumstick alcatra ribeye. Strip steak chuck andouille tenderloin bacon tri-tip ball tip beef capicola rump. Meatloaf bresaola drumstick ball tip salami. Drumstick ham bacon alcatra pig porchetta, spare ribs leberkas pork belly.</p> </div>
Using column offset classes can push a div over X number of columns. They work responsively using the breakpoints outlined below.
Use gutter styles or padding utilities to create gutters. You can use the default gutter style,
gutter, or either of its modifiers,
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.
Use padding utilities to create gutters for more customized layouts.
Use column widths with
d-inline-block as an alternative to floated grids.
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.
Using display table utilities with columns gives you some alternative layout options.
A useful example is being able to keep the height of the container equal across a row when the length of content may differ.
You can also create an alternative media object layout with
.display-table and column widths.
Note that table cells will fill the width of their container even when the total columns doesn’t add up to 12.
You can use flex utilities on the container and columns to create a flexbox grid.
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.
We use abbreviations for each breakpoint to keep the class names concise.
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.
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
This is how that same example would look at the
This is how that example would look at the
Container widths match our breakpoints and are available at a
xl size. Containers apply a max-width rather than a fixed width for responsive layouts, and they center the container.