Skip to content

Grid

You can position elements using a grid based on flexbox with the .row, .col, .col-sm, .col-md, and .col-lg classes. The b stands for breakpoint. The .col and .col-* classes will automatically size any number columns equally, but all have different breakpoints. The .col class works on any screen size, .col-sm works on small screens and up, .col-md works on medium screens and up, and .col-lg works on large screens and up. You can also add more breakpoints as needed.

.col
.col
.col-sm
.col-sm
.col-sm
.col-md
.col-md
.col-md
.col-md
.col-lg
.col-lg
.col-lg
.col-lg
.col-lg

Your content should always be within a column, and that column should always be within a row. You can also responsively define the column size based on a 12-column grid. You can make any class responsive just by adding *-sm, *-md, or *-lg to the class name, but before a number if it contains one.

.col-6
.col-6
.col-sm-5
.col-sm-7
.col-md-4
.col-md-8
.col-md-3
.col-md-9
.col-lg-2
.col-lg-10

Containers are optional and can be added when needed. You can also add a .gap to containers or rows, .align rows to containers, responsively offset columns by a specified amount with the .off-* class, embed rows within rows, and add a grid .outline for development or debugging purposes.

.off-4
.row
.col-sm-4
.off-sm-4
.off-md-4
.col-md-2
.off-lg-2
.off-lg-4

You can even .reverse columns, reorder columns to be .first or .last in a row, and change the row alignment or distribution of columns.

1
2
3
1
2
3
4
.center
.end
just
some
content
.middle
some
more
content
.bottom
.around
.around
.around
.between
.between
.between
Intro Type Lists Tables Forms Grid Download