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

Example - justify-content-start
col-3
col-auto
col-3
Example - justify-content-center
col-3
col-auto
col-3
Example - justify-content-end
col-3
col-auto
col-3
Example - justify-content-around
col-3
col-3
Example - 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

Example - align-items-start
col-3
col
col-3
Example - align-items-center
col-3
col
col-3
Example - 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

Example - align-self-start
col-3
col
col-3
Example - align-self-center
col-3
col
col-3
Example - align-items-end
col-3
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

Example - order-*
column 1
column 2
column 3
column 4
Example - order-first & order-last
column 1 but last
column 2
column 3
column 4 but first

<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.

parent column
child column 1
child column 2
child column 3

<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.

col - no gutters
col - no gutters
col - no gutters

<div class="row no-gutters">
	<div class="col">
	</div>
	<div class="col">
	</div>
	<div class="col">
	</div>
</div>