Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Grid - Extra Small Devices

Bootstrap’s grid includes five tiers of predefined classes for building complex responsive layouts.

Customize the size of your columns on extra small, small, medium, large, or extra large devices however you see fit.

Extra small Small Medium Large Extra large
Class prefix .col-* .col-sm-* .col-md-* .col-lg-* .col-xl-*
Screen width <576px >=576px >=768px >=992px >=1200px

The (*) symbol represents a number, which should add up to 12 for each row.


Grid Extra Small Examples

The following example shows how to get a three equal-width columns, on ALL devices (xsmall, small, medium, large and xlarge):

First column
Second column
Third column
Run code

Note that the .row uses display:flex. As Flexbox children, the columns in each row are the same height.

The following example shows two columns layouts that apply to ALL devices (extra small, small, medium, large and xlarge):

.col-3
.col-9
.col-4
.col-8
.col-6
.col-6
Run code

The following example shows three columns layouts that apply to ALL devices (extra small, small, medium, large and xlarge):

.col-3
.col-6
.col-3
.col-2
.col-8
.col-2
.col-4
.col-4
.col-4
Run code

Make sure that the sum of columns adds up to 12 or fewer in a row.

If more than 12 columns are placed within a single row, then each group of extra columns, will wrap onto a new line.



Auto Layout Columns

In Bootstrap 4, there is an easy way to create equal width columns: just remove the number from .col-* and only 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 3
2 of 3
3 of 3
1 of 4
2 of 4
3 of 4
4 of 4
Run code

Using auto-layout columns you can set the width of one column and have the sibling columns automatically resize around it, as shown below:

1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3
Run code

Equal-width multi-row

Create equal-width columns that span multiple rows by inserting a .w-100 where you want the columns to break to a new line.

col
col
col
col
Run code

Removing Gutters

Columns have horizontal padding to create the gutters between individual columns.

Use .no-gutters to remove negative margins from row and the horizontal padding from all immediate children columns.

Run code

The next chapter shows how to add a responsive variant of columns for small devices.