Table of Contents
Column Size
sm
These sizing class names start when the screen width is at 0px.
.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 672px.
.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 1056px.
.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 1312px.
.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 1584px.
.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
.bx--col-max-0