Column Size

sm

These sizing class names start when the screen width is at 0 px.

. bx--col-sm-1 . bx--col-sm-3 . bx--col-sm-2 . bx--col-sm-2 . bx--col-sm-4

md

These sizing class names start when the screen width is at 672 px.

. bx--col-md-1 . bx--col-md-7 . bx--col-md-2 . bx--col-md-6 . bx--col-md-3 . bx--col-md-5 . bx--col-md-4 . bx--col-md-4 . bx--col-md-8

lg

These sizing class names start when the screen width is at 1056 px.

. bx--col-lg-1 . bx--col-lg-15 . bx--col-lg-2 . bx--col-lg-14 . bx--col-lg-3 . bx--col-lg-13 . bx--col-lg-4 . bx--col-lg-12 . bx--col-lg-5 . bx--col-lg-11 . bx--col-lg-6 . bx--col-lg-10 . bx--col-lg-7 . bx--col-lg-9 . bx--col-lg-8 . bx--col-lg-8 . bx--col-lg-16

xl

These sizing class names start when the screen width is at 1312 px.

. bx--col-xl-1 . bx--col-xl-15 . bx--col-xl-2 . bx--col-xl-14 . bx--col-xl-3 . bx--col-xl-13 . bx--col-xl-4 . bx--col-xl-12 . bx--col-xl-5 . bx--col-xl-11 . bx--col-xl-6 . bx--col-xl-10 . bx--col-xl-7 . bx--col-xl-9 . bx--col-xl-8 . bx--col-xl-8 . bx--col-xl-16

max

These sizing class names start when the screen width is at 1584 px.

. bx--col-max-1 . bx--col-max-15 . bx--col-max-2 . bx--col-max-14 . bx--col-max-3 . bx--col-max-13 . bx--col-max-4 . bx--col-max-12 . bx--col-max-5 . bx--col-max-11 . bx--col-max-6 . bx--col-max-10 . bx--col-max-7 . bx--col-max-9 . bx--col-max-8 . bx--col-max-8 . bx--col-max-16

Subgrid

You can add a .bx-- grid or .bx-- row to any col item and children will know how many columns are available.

. bx--col-sm-1 . bx--col-sm-3 . bx--row > . bx--col-sm-1 . bx--col-sm-3 . bx--row > . bx--col-sm-2

. bx--col-md-1 . bx--col-md-7 . bx--row > . bx--col-md-3 . bx--col-md-7 . bx--row > . bx--col-md-4

. bx--col-lg-1 . bx--col-lg-15 . bx--row > . bx--col-lg-7 . bx--col-lg-15 . bx--row > . bx--col-lg-8

. bx--col-xl-1 . bx--col-xl-15 . bx--row > . bx--col-xl-7 . bx--col-xl-15 . bx--row > . bx--col-xl-8

. bx--col-max-1 . bx--col-max-15 . bx--row > . bx--col-max-7 . bx--col-max-15 . bx--row > . bx--col-max-8

Offset

The following col items will start at a specific column at the specified breakpoint.

. bx--col-sm-1 . bx--offset-sm-3

. bx--col-md-1 . bx--offset-md-7

. bx--col-lg-1 . bx--offset-lg-15

. bx--col-xl-1 . bx--offset-xl-15

. bx--col-max-1 . bx--offset-max-15

Hiding

The following col items will not display at the specified breakpoint. We then bring the back by specifying any col size at the next breakpoint.

. bx--col-sm-0 .bx--col-md-8

. bx--col-md-0 .bx--col-lg-16

. bx--col-lg-0 .bx--col-xl-16

. bx--col-xl-0 .bx--col-max-16