column 1 of 4 equal small division
column 1 of 4 equal small division
column 1 of 4 equal small division
column 1 of 4 equal small division
Here's some text
column 1 of 4 equal large division
column 1 of 4 equal large division
column 1 of 4 equal large division
column 1 of 4 equal large division
And some more text
Column 1 at 1/3rd
Column 2 at 2/3rds

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.

50%
50%

33.33%
33.33%
33.33%

25%
25%
25%
25%

25%
25%
25%
25%

Grid Example

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

Resize the browser window to see the effect.

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.

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.

Extra Small Grid

The following example will result in a 33.3%/66.6% split on all devices.

Resize the browser window to see the effect.

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.

This example will result in a 50%/50% 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.

Auto Layout Columns

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

1 of 2
2 of 2

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