Rows and columns are built using flexbox, meaning that our range of flexbox utilities can be used to modify their appearance.
Rows
Use .row to wrap column elements.
The space between columns (gutter) is created by horizontal padding on each column element, which rows offset to ensure that content within columns is aligned with regular content on the left and right sides.
<div class="row">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>Use the .row-sm or .row-lg modifiers to create rows with less or more gutter space, respectively:
<div class="row row-sm">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row row-lg">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>Columns
Fluid width
Use .col-{width} to create a column that spans a given number of columns out the default 12 per row. For example, three equal-width columns would use .col-4.
<div class="row">
<div class="col-4">
One of three columns
</div>
<div class="col-4">
One of three columns
</div>
<div class="col-4">
One of three columns
</div>
</div>Column widths are set in percentages, so they’re always fluid and sized relative to the parent row.
If more than 12 columns are placed within a single row, they will wrap onto a new line.
Use .{screen}:col-{width} to have a column occupy that width at a specific breakpoint and above.
For example, .md:col-6 will span 6 of 12 columns at only medium screen sizes and above:
Equal-width
Columns without a specified {width} will automatically layout as equal width columns:
<div class="container">
<div class="row">
<div class="col">1 of 2</div>
<div class="col">2 of 2</div>
</div>
<div class="row">
<div class="col">1 of 3</div>
<div class="col">2 of 3</div>
<div class="col">3 of 3</div>
</div>
</div>Equal-width columns can be broken into multiple lines using the .w-full utility.
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="w-full"></div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>Given flexbox behavior, you can set the width of one column and have the sibling columns automatically resize around it:
<div class="container">
<div class="row">
<div class="col">1 of 3</div>
<div class="col-6">2 of 3 (wider)</div>
<div class="col">3 of 3</div>
</div>
<div class="row">
<div class="col">1 of 3</div>
<div class="col-5">2 of 3 (wider)</div>
<div class="col">3 of 3</div>
</div>
</div>Horizontal alignment
Use a justify-content utility to control the alignment of columns within a horizontal row.
<div class="container">
<div class="row justify-content-start">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
<div class="row justify-content-center">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
<div class="row justify-content-end">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
<div class="row justify-content-around">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
<div class="row justify-content-between">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
</div>Vertical alignment
Use an align-items utility to control the alignment of columns within a vertical row.
<div class="container">
<div class="row align-items-start">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
<div class="row align-items-center">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
<div class="row align-items-end">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
</div>Columns can be aligned independently of one another using an align-self utility.
<div class="container">
<div class="row">
<div class="col align-self-start">One of three columns</div>
<div class="col align-self-center">One of three columns</div>
<div class="col align-self-end">One of three columns</div>
</div>
</div>Reordering
Use .col-order-{position} to control the visual order of columns, where {position} is a value between 1 and 12 (the total number of columns).
<div class="row">
<div class="col col-order-2">
.col-order-2
</div>
<div class="col col-order-3">
.col-order-3
</div>
<div class="col col-order-1">
.col-order-1
</div>
</div>These classes are responsive, so you can set the visual order by breakpoint (e.g., .col-order-1.md:col-order-2).
Use .flex-first and .flex-last utilities to display a column at the start or end of a row, respectively:
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col flex-last">
Second, but last
</div>
<div class="col flex-first">
Third, but first
</div>
</div>Offsetting
Columns can be offset using responsive .offset-{number} classes, or margin utilities.
Grid classes are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.
Offset classes
Use .{screen:}offset-{number} classes to move columns to the right using.
For example, .md:offset-4 moves a given column to the right by four columns widths for medium screen sizes and above.
<div class="row">
<div class="col-4 md:col-offset-2">
.col-4.md:col-offset-2
</div>
<div class="col-4">
.col-4
</div>
</div>Margin utilities
You can use margin utilities like .mr-auto to force sibling columns away from one another.
<div class="row">
<div class="col-4 mr-auto">
.col-4.mr-auto
</div>
<div class="col-4">
.col-4
</div>
</div>Nesting
Add a new .row and set of .sm:col-* columns within an existing .sm:col-* column to create a nested row.
Customizing
When using the source Sass files, you can customize the number of columns and column gap:
$column-number: 12;
$column-gap: 2rem;
$column-gap-sm: 1.5rem;
$column-gap-lg: 3rem;