Debug Mode

Regular columns

Add line class to separate them vertically

Column: col-[1-12] col-offset-[1-12] offset-[1-12]

.col-6
.col-5 .col-offset-1
.col-6
.col-5 .offset-1
.col-7
.col-5
.col-3
.col-3
.col-3
.col-3

Any number of columns

Column: col-[xs,sm,md,lg,xl] auto-[xs,sm,md,lg,xl]

.col
.col
.col
.col
.col
.col
.col
.col
.col
.col
.col .auto
.col-3
.col
.col-3

No gutter

Row: no-gutter-[xs,sm,md,lg,xl]

.col
.col
.col

Nesting

.col-6
.col-6
.col-6
.col-6
.col-6
.col-6
.col-12

Vertical rows

Column: Also add row class to the column element.

.col
.col
.col
.col
.col

Responsiveness

Column: col-[xs,sm,md,lg,xl]-[1-12] col-[xs,sm,md,lg,xl]-offset-[1-12] hidden-[xs,sm,md,lg,xl] hidden-[xs,sm,md,lg,xl]-[up,down]

.col-xs-4 .col-md-6
.col-xs-4 .col-md-6
.col-xs-4 .hidden-md

Hidden down example: hidden-[xs,sm,md,lg,xl]-down

.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-md-4 .hidden-md-down

Order

Column: order-[xs,sm,md,lg,xl]-[1-12]

.col-xs-12 .col-md-6 .order-xs-2 .order-md-1
.col-xs-12 .col-md-6 .order-xs-1 .order-md-2

Align

Row: start-[xs,sm,md,lg,xl] center-[xs,sm,md,lg,xl] end-[xs,sm,md,lg,xl] between-[xs,sm,md,lg,xl] around-[xs,sm,md,lg,xl]

Column: start-[xs,sm,md,lg,xl] center-[xs,sm,md,lg,xl] end-[xs,sm,md,lg,xl]

.col .auto
.col .auto
.col .auto
.col .auto
.col .auto
.col .auto
.col .auto
.col .auto
.col .auto
.col-xs-12 .col-md-6 .center-xs .start-md
.col-xs-12 .col-md-6 .end
.col-3
.col-3
.col-3
.col-3
.col-3
.col-3

Margins

Row: mt-[xs,sm,md,lg,xl]-[1-12]

.mt-1
.mb-1
.mb-md-10

Discrete container width

Container: container-fix container-fix-[sm,md,lg,xl]

Change window width to see

Container: container-fix

.col-6
.col-6

Container: container-fix-sm

.col-6
.col-6

Container: container-fix-md

.col-6
.col-6

Container: container-fix-lg

.col-6
.col-6

Container: container-fix-xl

.col-6
.col-6