Bootstrap 4 – Grid and Columns

In Bootstrap, the screen is divided into 12 columns, regardless of the screen size. Even a small screen on an old phone will be split into 12 columns, and Bootstrap will manage them. Let’s see how the Bootstrap grid system works on different devices with different sizes. A total of 5 size levels are supported.

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Maximum container width	None (auto)	540px	720px	960px	1140px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
Number of columns	12
Margin width	30px (auto 15px on each side of columns)

Both the site and the layout can adapt to any screen width. In Bootstrap, entire websites are created, or container blocks (container) are used separately for insertion into the page code.

Automatic Column Placement – Equal Column Width

To set equal column widths in a container, use the basic class `col-sm`.

Cell 1 of 2

Cell 2 of 2

Cell 1 of 3

Cell 2 of 3

Cell 3 of 3

				
					<div class="container">
  <div class="row">
    <div class="col-sm">
      Cell 1 of 2
    </div>
    <div class="col-sm">
      Cell 2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col-sm">
      Cell 1 of 3
    </div>
    <div class="col-sm">
     Cell 2 of 3
    </div>
    <div class="col-sm">
     Cell 3 of 3
    </div>
  </div>
</div>

When we don’t specify exact viewport sizes, it is divided equally among all cells. Each level starts with the minimum viewport size (col-sm) and automatically applies to larger devices unless overridden.

Different Column Sizes in a Row

There are 12 columns in a row. We can assign how many columns a column will occupy.

Automatic Layout

.col-md-3

.col-md-6

.col-md-3

Three columns of different widths will display on devices with a screen width of 720px or more.

Column with Adaptive Width

1 of 3

Column with adaptive width

3 of 3

				
					<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Column with adaptive width
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Display on Different Devices: Mobile and Desktop

The Bootstrap v4 grid system has five levels of classes: xs (very small, this class suffix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use virtually any combination of these classes to create more dynamic and flexible layouts. Each level of classes is scalable, which means that if you plan to set the same width for md, lg, and xl, you only need to specify md.

.col-6 .col-md-8

.col-6 .col-md-4

In this layout, on screens smaller than 720px, there will be 2 columns of equal size (`col-6`), and on devices with a screen larger than 720px, the columns will have different sizes (`col-md-8` and `col-md-4`).

.col-12 .col-md-8

.col-12 .col-md-4

On screens smaller than 720px, there will be 1 column (`col-12`), and on devices with a screen larger than 720px, there will be 2 columns of different sizes (`col-md-8` and `col-md-4`).

.col-6 .col-md-4

In this layout, columns on mobile devices (up to 720px) take up 50% of the screen width (`col-6`), and on screens larger than 720px, there will be 3 equal columns, each taking 33.3% (`col-md-4`). There are 12 columns in a row. If more than 12 columns are used in the code, each additional column will be moved to a new row.

Display on Mobile, Tablet, and Desktop

If we want to control the display on each device, with a different layout for mobile, tablet, and large desktop monitors, we need to specify the column size for each device.

.col-sm-6 .col-lg-8

.col-sm-6 .col-lg-4

In this layout, columns on mobile and tablet screens (up to 960px) will take up 50% of the screen width (`col-sm-6`), and on screens larger than 960px, there will be 2 columns of different sizes (`col-lg-8` and `col-lg-4`).

Reverse Example:

<div class="col-12 col-sm-12 col-md-4 col-lg-8 col-xl-8">Text</div>

The cell on mobile devices up to 576px (col-) and 768px (col-sm-) will occupy 12 columns, i.e., the entire row – col-12. On devices larger than 768px and up to 992px, the cell will occupy 4 columns (col-md-4), and on devices larger than 992px (col-lg-) and over 1200px (col-xl-), the cell will occupy 8 columns. This code can be shortened without losing its meaning to the following:

<div class="col-12 col-md-4 col-lg-8">Text</div>

web development

Bootstrap cheat sheet