.row is full-width by default
row
.row can have a max-width
row xs
row sm
row md
row lg
row xl
.row is centered by default
row md
.row can be aligned left or right
row sm left
row sm right
.col is full-width by default
row lg
col
.col can span 1-12 columns
row xl
col xs-12*
col xs-1
col xs-11
col xs-2
col xs-10
col xs-3
col xs-9
col xs-4
col xs-8
col xs-5
col xs-7
col xs-6
col xs-6
*Optional, .col is full-width by default.
.col width can be responsive
row
col sm-6
col sm-6
row
col xs-6 lg-3
col xs-6 lg-3
col xs-6 lg-3
col xs-6 lg-3
row
col sm-6 md-4 lg-3
col sm-6 md-4 lg-3
col sm-6 md-4 lg-3
col sm-6 md-4 lg-3
.col visibility can be responsive
row
col xs-12 lg-0
Hidden on large and up (col xs-12 lg-0).
row
col xs-0 lg-12
Visible on large and up (col xs-0 lg-12).
row
col xs-12 sm-0 md-12
Hidden only on small (col xs-12 sm-0 md-12).
row
col xs-0 sm-12 md-0
Visible only on small (col xs-0 sm-12 md-0).
.row can be nested in another .row
row
row
row xl
row sm right
col xs-6
col xs-6
row lg
row xs left
col
row xs
col
row xs right
col
.row can be nested in a .col
row
col
row
row lg
col xs-6
row xs
col xs-6
row xs
row xl
col md-8
row xs left
row xs right
col md-4
row
row
.row reference
Row Classes
Class Max-Width
.xs 512px
.sm 768px
.md 1024px
.lg 1280px
.xl 1536px
.col reference
Column Classes
Class Screen Width
.xs-[0-12] 0px+
.sm-[0-12] 512px+
.md-[0-12] 768px+
.lg-[0-12] 1024px+
.xl-[0-12] 1280px+