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)
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 4
2 of 4
3 of 4
4 of 4