Grid

12-column flexbox grid with 5 breakpoints, offsets, ordering, and display utilities.

← Back to examples

Basic columns

col-12
col-6
col-6
col-4
col-4
col-4
col-3
col-3
col-3
col-3
col-2
col-2
col-2
col-2
col-2
col-2

Responsive columns

Resize the browser to see the columns adapt.

col-12 col-md-6 col-lg-4
col-12 col-md-6 col-lg-4
col-12 col-md-12 col-lg-4
col-12 col-sm-6 col-lg-3
col-12 col-sm-6 col-lg-3
col-12 col-sm-6 col-lg-3
col-12 col-sm-6 col-lg-3

Offsets

col-6 offset-3
col-4 offset-2
col-4
col-3 offset-1
col-3 offset-4

Ordering

First in DOM, order-3
Second in DOM, order-1
Third in DOM, order-2
order-last
No order
order-first

Display utilities

Always visible
Hidden on mobile, visible from md