Grid
Grid wrap
The grid wrapper has negaive side margin to ensure that nested grids will be aligned with rest of the content without adding extra padding on the sides. Every grid should be wrapped with <div> with class .row
.container-fluid .row .col
<div class="row">
<!-- Columns here -->
</div>
Automatic columns
If you need to divide space evenly for any number of columns just use .col class.
Also responsive classes are available:
.col.col-sm.col-md.col-lg.col-xl
.col .col .col .col .col .col .col .col
<div class="row">
<div class="col">
</div>
</div>
<div class="row">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
Breaking columns into rows
If you need to break auto-calculated width columns into rows after certain amount (e.g. automatically generated blocks) you can use an empty <div> element with assigned class .w-100. Works well also with display classes e.g .w-100 .d-lg-none
.col .col .col .col .col .col .col
<div class="row">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="w-100"></div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
Single column custom width
It is possible to combine custom width columns with auto-calculated width columns.
Column sizes and their responsive variants:
.col-1.col-2.col-3.col-4.col-5.col-6.col-7.col-8.col-9.col-10.col-11.col-12
.col-sm-1.col-sm-2.col-sm-3.col-sm-4.col-sm-5.col-sm-6.col-sm-7.col-sm-8.col-sm-9.col-sm-10.col-sm-11.col-sm-12
.col-md-1.col-md-2.col-md-3.col-md-4.col-md-5.col-md-6.col-md-7.col-md-8.col-md-9.col-md-10.col-md-11.col-md-12
.col-lg-1.col-lg-2.col-lg-3.col-lg-4.col-lg-5.col-lg-6.col-lg-7.col-lg-8.col-lg-9.col-lg-10.col-lg-11.col-lg-12
.col-xl-1.col-xl-2.col-xl-3.col-xl-4.col-xl-5.col-xl-6.col-xl-7.col-xl-8.col-xl-9.col-xl-10.col-xl-11.col-xl-12
.col .col .col-5 .col
<div class="row">
<div class="col">
</div>
<div class="col">
</div>
<div class="col-5">
</div>
<div class="col">
</div>
</div>
Single column variable width
For columns with width adaptive to its content use class .col-auto
Responsive variants for column with automatic width:
.col-auto.col-sm-auto.col-md-auto.col-lg-auto.col-xl-auto
.col-3 .col-auto .col-3 .col .col-auto .col-3
<div class="row">
<div class="col-3">
</div>
<div class="col-auto">
</div>
<div class="col-3">
</div>
</div>
<div class="row">
<div class="col">
</div>
<div class="col-auto">
</div>
<div class="col-3">
</div>
</div>
Horizontal alignment of columns
To align columns horizontally add .justify-content- ... class to parent wrapper with class .row.
Responsive variants for horizontal alignment are:
.justify-content-start.justify-content-center.justify-content-end.justify-content-around.justify-content-between
.justify-content-sm-start.justify-content-sm-center.justify-content-sm-end.justify-content-sm-around.justify-content-sm-between
.justify-content-md-start.justify-content-md-center.justify-content-md-end.justify-content-md-around.justify-content-md-between
.justify-content-lg-start.justify-content-lg-center.justify-content-lg-end.justify-content-lg-around.justify-content-lg-between
.justify-content-xl-start.justify-content-xl-center.justify-content-xl-end.justify-content-xl-around.justify-content-xl-between
.justify-content-start .col-3 .col-auto .col-3 .justify-content-center .col-3 .col-auto .col-3 .justify-content-end .col-3 .col-auto .col-3 .justify-content-around .col-3 .col-3 .justify-content-between .col-3 .col-3
<div class="row justify-content-start">
<div class="col-3">
</div>
<div class="col-auto">
</div>
<div class="col-3">
</div>
</div>
<div class="row justify-content-center">
<div class="col-3">
</div>
<div class="col-auto">
</div>
<div class="col-3">
</div>
</div>
<div class="row justify-content-end">
<div class="col-3">
</div>
<div class="col-auto">
</div>
<div class="col-3">
</div>
</div>
<div class="row justify-content-around">
<div class="col-3">
</div>
<div class="col-3">
</div>
</div>
<div class="row justify-content-between">
<div class="col-3">
</div>
<div class="col-3">
</div>
</div>
Vertical alignment of columns
To align columns vertically add .align-items- ... class to parent wrapper with class .row.
Responsive variants for vertical alignment are:
.align-items-start.align-items-center.align-items-end
.align-items-sm-start.align-items-sm-center.align-items-sm-end
.align-items-md-start.align-items-md-center.align-items-md-end
.align-items-lg-start.align-items-lg-center.align-items-lg-end
.align-items-xl-start.align-items-xl-center.align-items-xl-end
.align-items-start .col-3 .col .col-3 .align-items-center .col-3 .col .col-3 .align-items-end .col-3 .col .col-3
<div class="row align-items-start">
<div class="col-3">
</div>
<div class="col-auto">
</div>
<div class="col-3">
</div>
</div>
<div class="row align-items-center">
<div class="col-3">
</div>
<div class="col-auto">
</div>
<div class="col-3">
</div>
</div>
<div class="row align-items-end">
<div class="col-3">
</div>
<div class="col-auto">
</div>
<div class="col-3">
</div>
</div>
Vertical alignment of single column
By default all columns are matching the height of tallest sibling. To align column vertically add .align-self- ... class to column which you want to align.
Responsive variants for vertical alignment are:
.align-self-start.align-self-center.align-self-end
.align-self-sm-start.align-self-sm-center.align-self-sm-end
.align-self-md-start.align-self-md-center.align-self-md-end
.align-self-lg-start.align-self-lg-center.align-self-lg-end
.align-self-xl-start.align-self-xl-center.align-self-xl-end
.align-self-start .col-3 .align-self-start .col .col-3 .align-self-center .col-3 .align-self-center .col .col-3 .align-items-end .col-3 .align-self-end .col .col-3
<div class="row">
<div class="col-3 align-self-start">
</div>
<div class="col-auto">
</div>
<div class="col-3">
</div>
</div>
<div class="row">
<div class="col-3 align-self-center">
</div>
<div class="col-auto">
</div>
<div class="col-3">
</div>
</div>
<div class="row">
<div class="col-3 align-self-end">
</div>
<div class="col-auto">
</div>
<div class="col-3">
</div>
</div>
Offsetting columns
To offset columns there exist .offset-* classes with sizes from 1 to 11. All offset classes have also their responsive variants
Offset classes and their responsive variants:
.offset-1.offset-2.offset-3.offset-4.offset-5.offset-6.offset-7.offset-8.offset-9.offset-10.offset-11
.offset-sm-1.offset-sm-2.offset-sm-3.offset-sm-4.offset-sm-5.offset-sm-6.offset-sm-7.offset-sm-8.offset-sm-9.offset-sm-10.offset-sm-11
.offset-md-1.offset-md-2.offset-md-3.offset-md-4.offset-md-5.offset-md-6.offset-md-7.offset-md-8.offset-md-9.offset-md-10.offset-md-11
.offset-lg-1.offset-lg-2.offset-lg-3.offset-lg-4.offset-lg-5.offset-lg-6.offset-lg-7.offset-lg-8.offset-lg-9.offset-lg-10.offset-lg-11
.offset-xl-1.offset-xl-2.offset-xl-3.offset-xl-4.offset-xl-5.offset-xl-6.offset-xl-7.offset-xl-8.offset-xl-9.offset-xl-10.offset-xl-11
.col-1 .offset-1 .col-1 .offset-2 .col-1 .offset-3
Another way to offset columns is just add margin auto class e.g. .ml-auto or .mr-auto. For responsive variants see Margin section
.col-3 .col-3 .ml-auto .col-3 .ml-auto .col-3 .ml-auto .col-3 .ml-auto .col-3 .mr-auto .col-3 .mr-auto .col-3 .ml-auto
<div class="row">
<div class="col-1 offset-1">
</div>
<div class="col-1 offset-2">
</div>
<!-- ... and so on till offset-11 ... -->
</div>
<div class="row">
<div class="col-3">
</div>
<div class="col-3 ml-auto">
</div>
</div>
<div class="row">
<div class="col-3 ml-auto">
</div>
<div class="col-3 ml-auto">
</div>
</div>
<div class="row">
<div class="col-3 ml-auto">
</div>
<div class="col-3 mr-auto">
</div>
</div>
<div class="row">
<div class="col-3 mr-auto">
</div>
<div class="col-3 ml-auto">
</div>
</div>
Reordering Columns
Flex allows to reorder grid columns on various screen sizes. if you need just basic reordering like move element to start or to end use .order-first or .order-last classes respectively. If you need to reorder multiple columns use classes .order-0 to .order-12.
Column order classes and their responsive variants:
.order-first.order-last.order-0.order-1.order-2.order-3.order-4.order-5.order-6.order-7.order-8.order-9.order-10.order-11.order-12
.order-sm-first.order-sm-last.order-sm-0.order-sm-1.order-sm-2.order-sm-3.order-sm-4.order-sm-5.order-sm-6.order-sm-7.order-sm-8.order-sm-9.order-sm-10.order-sm-11.order-sm-12
.order-md-first.order-md-last.order-md-0.order-md-1.order-md-2.order-md-3.order-md-4.order-md-5.order-md-6.order-md-7.order-md-8.order-md-9.order-md-10.order-md-11.order-md-12
.order-lg-first.order-lg-last.order-lg-0.order-lg-1.order-lg-2.order-lg-3.order-lg-4.order-lg-5.order-lg-6.order-lg-7.order-lg-8.order-lg-9.order-lg-10.order-lg-11.order-lg-12
.order-xl-first.order-xl-last.order-xl-0.order-xl-1.order-xl-2.order-xl-3.order-xl-4.order-xl-5.order-xl-6.order-xl-7.order-xl-8.order-xl-9.order-xl-10.order-xl-11.order-xl-12
.order-* .order-first & .order-last
<div class="row">
<div class="col-3 order-0 order-sm-1 order-md-2 order-lg-3 order-xl-0">
</div>
<div class="col-3 order-1 order-sm-2 order-md-3 order-lg-0 order-xl-1">
</div>
<div class="col-3 order-2 order-sm-3 order-md-0 order-lg-1 order-xl-2">
</div>
<div class="col-3 order-3 order-sm-0 order-md-1 order-lg-2 order-xl-3">
</div>
</div>
<div class="row">
<div class="col-3 order-last">
</div>
<div class="col-3">
</div>
<div class="col-3">
</div>
<div class="col-3 order-first">
</div>
</div>
Nesting Columns
Grids can be nested within each other. The .row wrapper will cause there is no extra side padding within every sub grid.
<div class="row">
<div class="col">
<div class="row">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>
</div>
</div>
No gutters
The use of class .no-gutters on grid wrapper (.row) will remove negative margin of .row wrapper and horizontal padding of all elements inside.
<div class="row no-gutters">
<div class="col">
</div>
<div class="col">
</div>
<div class="col">
</div>
</div>