Bootstrap 4 Grid System

Bootstrap's grid system allows up to 12 columns across the page.

If you do not want to use all 12 column individually, you can group the columns together to create wider columns:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
 span 4  span 4  span 4
span 4 span 8
span 6 span 6
span 12

Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.


Grid Classes

The Bootstrap 4 grid system has five classes:

The classes above can be combined to create more dynamic and flexible layouts.

Tip: Each class scales up, so if you wish to set the same widths for sm and md, you only need to specify sm.


Grid System Rules

Some Bootstrap 4 grid system rules:




Basic Grid Structure

Resize the browser window to see the effect.

The first, second and third row will automatically stack on top of each other when the screen is less than 576px wide.

This shows edge to edge coverage with the container-fluid class.
To make the gutters on the sides uniform use the container only class.
50%
50%

33.33%
33.33%
33.33%

25%
25%
25%
25%

25%
25%
25%
25%



Grid Options

The following table summarizes how the Bootstrap 4 grid system works across different screen sizes:

  Extra small (<576px) Small (>=576px) Medium (>=768px) Large (>=992px) Extra Large (>=1200px)
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
Grid behaviour Horizontal at all times Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints
Container width None (auto) 540px 720px 960px 1140px
Suitable for Portrait phones Landscape phones Tablets Laptops Laptops and Desktops
# of columns 12 12 12 12 12
Gutter width 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column) 30px (15px on each side of a column)
Nestable Yes Yes Yes Yes Yes
Offsets Yes Yes Yes Yes Yes
Column ordering Yes Yes Yes Yes Yes




Auto Layout Columns

In Bootstrap 4, there is an easy way to create equal width columns: just use the .col-size class on a specified number of col elements. Bootstrap will recognize how many columns there are, and each column will get the same width.

Two columns: 50% width on all screens, except for extra small (100% width on screens less than 576px wide)

1 of 2
2 of 2

Four columns: 25% width on all screens, except for extra small (100% width on screens less than 576px wide)

1 of 4
2 of 4
3 of 4
4 of 4



Extra Small Grid

The following example will result in a 25%/75% split on all devices.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.



Three Unequal Columns

It is enough to only set the width of one column, and have the sibling columns automatically resize around it. The following example will create a 25%/50%/25% split:

.col
.col-6
.col



More Equal Columns

1 of 2
2 of 2

1 of 4
2 of 4
3 of 4
4 of 4

1 of 6
2 of 6
3 of 6
4 of 6
5 of 6
6 of 6



More Unequal Columns

1 of 2
2 of 2

1 of 4
2 of 4
3 of 4
4 of 4

1 of 4
2 of 4
3 of 4
4 of 4



Equal Height

If one of the column is taller than the other, the rest will follow.

Lorem ipsum dolor sit amet, cibo sensibus interesset no sit. Et dolor possim volutpat qui. No malis tollit iriure eam, et vel tale zril blandit, rebum vidisse nostrum qui eu. No nostrud dolorem legendos mea, ea eum mucius oporteat platonem.Eam an case scribentur, ei clita causae cum, alia debet eu vel.
.col
.col



Nested Columns

Add columns inside other columns:

.col-8
.col-6
.col-6
.col-4



Responsive Classes

The Bootstrap 4 grid system has five classes:

The classes above can be combined to create more dynamic and flexible layouts.

Tip: Each class scales up, so if you wish to set the same widths for sm and md, you only need to specify sm.




Stacked to Horizontal

Resize the browser window to see the effect.

This example demonstrates a 75%/25% split on small, medium, large and xlarge devices. On extra small devices, it will stack (100% width).

col-sm-9
col-sm-3

This example demonstrates a 33% split on small, medium, large and xlarge devices. On extra small devices, it will stack (100% width).

col-sm
col-sm
col-sm



Mix and Match

Resize the browser window to see the effect.

This example demonstrates a 50%/50% split on extra small devices and 75%/25% split on larger devices.

col-6 col-sm-9
col-6 col-sm-3

This example demonstrates a 58%/42% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices.

col-7 col-lg-8
col-5 col-lg-4

This example demonstrates a 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%).

col-sm-3 col-md-6 col-lg-4
col-sm-9 col-md-6 col-lg-8



No Gutters

Add the .no-gutters class to the .row container to remove gutters (extra space):

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.



more coming soon...