Get boba!
boba Version 1.7.2

Grid

Grids provide the foundation you need to organize content.

Clarification

Use a .row element to hold up to 12 .col elements. Unsized column elements will automatically expand to fill the rest of a row.

Set specific widths from 1-12 using the .[screen-size]-[width] classes. More information on screen-sizes can be found on boba's breakpoint cheat sheet.

To ensure optimal responsiveness, be sure to place .row elements inside of a container.

1
.col
2
.col
3
.col
4
.col
5
.col
6
.col
7
.col
8
.col
9
.col
10
.col
11
.col
12 
<!-- A standard 3-column, responsive layout -->
<div class="row">
    <div class="col xs-12 sm-12 md-6 lg-4 xl-4">
        <!-- Content here -->
    </div>
    <div class="col xs-12 sm-12 md-6 lg-4 xl-4">
        <!-- Content here -->
    </div>
    <div class="col xs-12 sm-12 md-6 lg-4 xl-4">
        <!-- Content here -->
    </div>
</div>

Gapless Grid

Add the .gapless class to a .row to remove the gaps between the columns.

Gaps

.col .xs-4
.col .xs-4
.col .xs-4

Gapless

.col .xs-4
.col .xs-4
.col .xs-4 
<!-- A standard 3-column, gapless, responsive layout -->
<div class="row gapless">
    <div class="col xs-12 sm-12 md-6 lg-4 xl-4">
        <!-- Content here -->
    </div>
    <div class="col xs-12 sm-12 md-6 lg-4 xl-4">
        <!-- Content here -->
    </div>
    <div class="col xs-12 sm-12 md-6 lg-4 xl-4">
        <!-- Content here -->
    </div>
</div>

Offsets

Offset columns in a row by 1-11 units using the .offset-[screen-size]-[width] classes to create unique layouts.

Clarification

Each column can be offset by a maximum of (12 - column width) column units. More information on screen-sizes can be found on boba's breakpoint cheat sheet.

.col .xs-4
.col .xs-4 .offset-xs-4

.col .xs-6 .offset-xs-3
.col 
<div class="row">
    <div class="col xs-6 offset-xs-3">
        <div class="bg-orange text-center">
            .col .xs-6 .offset-xs-3
        </div>
    </div>
    <div class="col">
        <div class="bg-yellow text-center">
            .col
        </div>
    </div>
</div>

Vertical Center Content

Easily vertically center content within a column using the .vertical-center-content class.
.col .xs-4
.col .xs-4
.col .xs-4 
<div class="row">
    <div class="col xs-12">
        <div class="bg-green text-center vertical-center-content">
            .col .xs-12
        </div>
    </div>
</div>

Column Alignment

Vertically align columns in a row using the .col-top, .col-middle, and .col-bottom classes.
.col-top
.col-middle
.col-bottom 
<div class="row">
    <div class="col col-top xs-4">
        <div class="bg-light text-center vertical-center-content">
            .col-top
        </div>
    </div>
    <div class="col col-middle xs-4">
        <div class="bg-light text-center vertical-center-content">
            .col-middle
        </div>
    </div>
    <div class="col col-bottom xs-4">
        <div class="bg-light text-center vertical-center-content">
            .col-bottom
        </div>
    </div>
</div>

Row Alignment

Quickly set the vertical alignment of all columns within a row.

Row Align Top

Align all columns in a row to the top of the row using the .row-align-top class.
.col .xs-4
.col .xs-4
.col .xs-4 
<div class="row row-align-top">
    <div class="col xs-4">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-4
        </div>
    </div>
    <div class="col xs-4">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-4
        </div>
    </div>
    <div class="col xs-4">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-4
        </div>
    </div>
</div>

Row Align Center

Align all columns in a row to the vertical center of the row using the .row-align-center class.
.col .xs-4
.col .xs-4
.col .xs-4 
<div class="row row-align-center">
    <div class="col xs-4">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-4
        </div>
    </div>
    <div class="col xs-4">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-4
        </div>
    </div>
    <div class="col xs-4">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-4
        </div>
    </div>
</div>

Row Align Bottom

Align all columns in a row to the bottom of the row using the .row-align-bottom class.
.col .xs-4
.col .xs-4
.col .xs-4 
<div class="row row-align-bottom">
    <div class="col xs-4">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-4
        </div>
    </div>
    <div class="col xs-4">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-4
        </div>
    </div>
    <div class="col xs-4">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-4
        </div>
    </div>
</div>

Row Align Stretch

All columns in a row will stretch to the max height of the row using the .row-align-stretch class.
The effect is subtle, but trust us, it works!
.col xs-4
.col xs-4
.col xs-4 
<div class="row row-align-stretch">
    <div class="col xs-4">
        <div class="bg-light text-center vertical-center-content">
            .col xs-4
        </div>
    </div>
    <div class="col xs-4">
        <div class="bg-light text-center vertical-center-content">
            .col xs-4
        </div>
    </div>
    <div class="col xs-4">
        <div class="bg-light text-center vertical-center-content">
            .col xs-4
        </div>
    </div>
</div>

Row Align Space Around

By using the .row-align-space-around class, when a row wraps, each sub-row will have an equal amount of spacing around them on each side, including the first/last rows.
.col .xs-6
.col .xs-6
.col .xs-6
.col .xs-6 
<div class="row row-align-space-around">
    <div class="col xs-6">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-6
        </div>
    </div>
    <div class="col xs-6">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-6
        </div>
    </div>
    <div class="col xs-6">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-6
        </div>
    </div>
    <div class="col xs-6">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-6
        </div>
    </div>
</div>

Row Align Space Between

By using the .row-align-space-between class, when a row wraps, each sub-row will have equal spacing between them and the first/last rows will be flush to the containing element.
.col .xs-6
.col .xs-6
.col .xs-6
.col .xs-6 
<div class="row row-align-space-between">
    <div class="col xs-6">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-6
        </div>
    </div>
    <div class="col xs-6">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-6
        </div>
    </div>
    <div class="col xs-6">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-6
        </div>
    </div>
    <div class="col xs-6">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-6
        </div>
    </div>
</div>

Row Align Space Evenly

By using the .row-align-space-evenly class, when a row wraps, each sub-row will have equal spacing around them, including the first/last rows.
.col .xs-6
.col .xs-6
.col .xs-6
.col .xs-6 
<div class="row row-align-space-evenly">
    <div class="col xs-6">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-6
        </div>
    </div>
    <div class="col xs-6">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-6
        </div>
    </div>
    <div class="col xs-6">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-6
        </div>
    </div>
    <div class="col xs-6">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-6
        </div>
    </div>
</div>

Row Justification

Quickly set the horizontal alignment of all columns within a row.

Row Justify Left

Left align all columns in a row using the .row-justify-left class.
.col .xs-3
.col .xs-3
.col .xs-3 
<div class="row row-justify-left">
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-3
        </div>
    </div>
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-3
        </div>
    </div>
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-3
        </div>
    </div>
</div>

Row Justify Center

Center align all columns in a row using the .row-justify-center class.
.col .xs-3
.col .xs-3
.col .xs-3 
<div class="row row-justify-center">
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-3
        </div>
    </div>
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-3
        </div>
    </div>
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-3
        </div>
    </div>
</div>

Row Justify Right

Right align all columns in a row using the .row-justify-right class.
.col .xs-3
.col .xs-3
.col .xs-3 
<div class="row row-justify-right">
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-3
        </div>
    </div>
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-3
        </div>
    </div>
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-3
        </div>
    </div>
</div>

Row Justify Stretch

Stretch all columns in a row to fill the full width of the row using the .row-justify-stretch class.

Clarification

This only works for columns that do not have user-specified widths and is the default behavior of basic .col elements.

.col
.col
.col 
<div class="row row-justify-stretch">
    <div class="col">
        <div class="bg-light text-center vertical-center-content">
            .col
        </div>
    </div>
    <div class="col">
        <div class="bg-light text-center vertical-center-content">
            .col
        </div>
    </div>
    <div class="col">
        <div class="bg-light text-center vertical-center-content">
            .col
        </div>
    </div>
</div>

Row Justify Space Around

By using the .row-justify-space-around class, each column element in a row will have an equal amount of spacing on each sides, including the first/last columns.
.col .xs-3
.col .xs-3
.col .xs-3 
<div class="row row-justify-space-around">
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-3
        </div>
    </div>
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-3
        </div>
    </div>
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-3
        </div>
    </div>
</div>

Row Justify Space Between

By using the .row-justify-space-between class, each column in a row will have equal spacing between them and the first/last columns will be flush to the containing row.
.col .xs-3
.col .xs-3
.col .xs-3 
<div class="row row-justify-space-between">
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-3
        </div>
    </div>
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-3
        </div>
    </div>
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-3
        </div>
    </div>
</div>

Row Justify Space Evenly

By using the .row-justify-space-evenly class, each column in a row will have equal spacing around them, including the first/last columns.
.col .xs-3
.col .xs-3
.col .xs-3 
<div class="row row-justify-space-evenly">
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-3
        </div>
    </div>
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-3
        </div>
    </div>
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            .col .xs-3
        </div>
    </div>
</div>

Row Direction

Quickly change the order and direction of columns in a row.

Row Direction Row (Forward)

The default behavior for columns in a row. Columns will appear in sequential order when using the .row-direction-row class.
1
2
3 
<div class="row row-direction-row">
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            1
        </div>
    </div>
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            2
        </div>
    </div>
    <div class="col xs-6">
        <div class="bg-light text-center vertical-center-content">
            3
        </div>
    </div>
</div>

Row Direction Row Reverse

Columns will appear in reverse-sequential order when using the .row-direction-row-reverse class.
1
2
3 
<div class="row row-direction-row-reverse">
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            1
        </div>
    </div>
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            2
        </div>
    </div>
    <div class="col xs-6">
        <div class="bg-light text-center vertical-center-content">
            3
        </div>
    </div>
</div>

Row Direction Column

Columns will appear vertically stacked in sequential order when using the .row-direction-column class.

Clarification

Column direction will not respect user-specified column widths. All columns will be stretched to fill the entire row.

1
2
3 
<div class="row row-direction-column">
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            1
        </div>
    </div>
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            2
        </div>
    </div>
    <div class="col xs-6">
        <div class="bg-light text-center vertical-center-content">
            3
        </div>
    </div>
</div>

Row Direction Column Reverse

Columns will appear vertically stacked in reverse-sequential order when using the .row-direction-column-reverse class.

Clarification

Column direction will not respect user-specified column widths. All columns will be stretched to fill the entire row.

1
2
3 
<div class="row row-direction-column-reverse">
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            1
        </div>
    </div>
    <div class="col xs-3">
        <div class="bg-light text-center vertical-center-content">
            2
        </div>
    </div>
    <div class="col xs-6">
        <div class="bg-light text-center vertical-center-content">
            3
        </div>
    </div>
</div>