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 Basics

Bootstrap 4 grid system built with flexbox which is fully responsive and scales up to 12 columns (according to the size of device).


What is Bootstrap 4 Grid System?

Bootstrap 4 grid system provides the quick and easy way to create responsive website layouts.

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content.

Bootstrap's grid system is built with flexbox and allows up to 12 columns across the page.

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

col 1col 1col 1col 1col 1col 1 col 1col 1col 1col 1col 1col 1
col 4 col 4 col 4
col 3 col 3 col 3 col 3
col 6 col 6
col 3 col 9
col 12

Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size.

Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns).

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


Bootstrap 4 Grid Classes

The Bootstrap 4 grid system has five classes and these classes can be combined to create more dynamic and flexible layouts:

  • .col- (extra small devices - screen width less than 576px)
  • .col-sm- (small devices - screen width equal to or greater than 576px)
  • .col-md- (medium devices - screen width equal to or greater than 768px)
  • .col-lg- (large devices - screen width equal to or greater than 992px)
  • .col-xl- (xlarge devices - screen width equal to or greater than 1200px)

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



Structure of a Bootstrap 4 Grid

First create a row <div class="row"> then, add the desired number of columns (.col-*-*).

Note that numbers in .col-*-* should always add up to 12 for each row.

The following code shows a basic structure of a Bootstrap 4 grid:

First example: The first star (*) represents the responsiveness: sm, md, lg or xl, while the second star (*) represents a number, which should add up to 12 for each row.

Second example: Instead of adding a number to each col, let bootstrap handle the layout, to create equal width columns.

The following section shows some examples of basic Bootstrap 4 grid layouts.


Three Equal Columns

First column
Second column
Third column

The following example shows how to create three equal-width columns, on all devices and screen widths:

Run code

Three Equal Responsive Columns

First column
Second column
Third column

The following example shows how to get a three equal-width columns that apply to viewport from small to xlarge.

On mobile phones or screens that are less than 576px wide, the columns will automatically stack.

Run code

Two Unequal Responsive Columns

First column
Second column

The following example shows how to get a two unequal-width columns that apply to viewport from small to xlarge.

On mobile phones or screens that are less than 576px wide, the columns will automatically stack.

Run code

You will learn more about Bootstrap 4 Grids later in this tutorial.