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 System

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 is fully responsive.

Bootstrap's grid system allows up to 12 columns across the page.

If you do not want to use all 12 column 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.


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 <576px)
  • .col-sm- (small devices - screen width >=576px)
  • .col-md- (medium devices - screen width >=768px)
  • .col-lg- (large devices - screen width >=992px)
  • .col-xl- (xlarge devices - screen width >=1200px)

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


Grid System Rules

Bootstrap 4 grid system rules:

  • Rows must be placed within a .container for a responsive pixel width or .container-fluid for width: 100% across all viewport and device sizes.
  • Use rows to create horizontal groups of columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.
  • Content must be placed within columns and only columns may be immediate children of rows.
  • Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use .col-4.
  • Column widths are set in percentages, so they’re always fluid and sized relative to their parent element.
  • Columns have horizontal padding to create the gutters between individual columns, however, you can remove the margin from rows and padding from columns with .no-gutters on the .row.
  • To make the grid responsive, there are five grid breakpoints, one for each responsive breakpoint: all breakpoints (extra small), small, medium, large, and extra large.
  • Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., .col-sm-4 applies to small, medium, large, and extra large devices, but not the first xs breakpoint).


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.


Grid Options

The following table summarizes how the Bootstrap 4 grid system works across different screen sizes:

Extra small
<576px
Small
≥576px
Medium
≥768px
Large
≥992px
Extra large
≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 30px (15px on each side of a column)
Nestable Yes
Column ordering Yes

What You Will Learn

In the next chapters of this tutorial you will learn: