Bootstrap 4
Bootstrap 4 Grid System
Bootstrap 4 Grid systems enable you to create powerful mobile-first flex-box grid to build layouts of all shapes and sizes. The Bootstrap 4 grid system can have up to 12 column system and 5 default responsive tiers.
Bootstrap 4 grid system

The following table shows how different grid options work with different viewport 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

Containers provide a means to center and horizontally pad your site’s contents. Use .container for a responsive pixel width or .container-fluid for width: 100% across all viewport and device sizes.

.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-1
.col-sm-2
.col-sm-3
.col-sm-7
.col-sm-4
.col-sm-4
.col-sm-4
.col-sm-5
.col-sm-7
.col-sm-6
.col-sm-6
.col-sm-12

The sm means that the colspan applies to small devices and everything above. You can also use md, lg, and xl for medium, large, and extra large.

Equal-width

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

col
col
col
col
col
<div class="container">
  <div class="row">
    <div class="col"> col </div>
    <div class="col"> col </div>
  </div>
  <div class="row">
    <div class="col"> col </div>
    <div class="col"> col </div>
    <div class="col"> col </div>
  </div>
</div>
Setting one column width

Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths.

col
col-6
col
<div class="container">
 <div class="row">
  <div class="col"> col  </div>
  <div class="col-6">  col-6 </div>
  <div class="col"> col </div>
 </div>
</div>
Stacked to horizontal

Using a single set of .col-sm-* classes, you can create a basic grid system that starts out stacked on extra small devices before becoming horizontal on desktop (medium) devices.

col-sm
col-sm
col-sm
col-sm-8
col-sm-4
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>
<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
Mix and match

Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>
Vertical alignment
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
One of three columns
<div class="container">

  <div class="row align-items-start">
    <div class="col"> One of three columns </div>
    <div class="col"> One of three columns </div>
    <div class="col"> One of three columns </div>
  </div>
  
  <div class="row align-items-center">
    <div class="col"> One of three columns </div>
    <div class="col"> One of three columns </div>
    <div class="col"> One of three columns </div>
  </div>
  
  <div class="row align-items-end">
    <div class="col"> One of three columns </div>
    <div class="col"> One of three columns </div>
    <div class="col"> One of three columns </div>
  </div>

  <div class="row">
    <div class="col align-self-start"> One of three columns </div>
    <div class="col align-self-center"> One of three columns </div>
    <div class="col align-self-end"> One of three columns </div>
  </div>
  
</div>
Horizontal alignment
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
One of two columns
<div class="container">
  <div class="row justify-content-start">
    <div class="col-4"> One of two columns </div>
    <div class="col-4"> One of two columns </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4"> One of two columns </div>
    <div class="col-4"> One of two columns </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4"> One of two columns </div>
    <div class="col-4"> One of two columns </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4"> One of two columns </div>
    <div class="col-4"> One of two columns </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4"> One of two columns </div>
    <div class="col-4"> One of two columns </div>
  </div>
</div>
Offset classes

Move columns to the right using .offset-md-* classes. These classes increase the left margin of a column by * columns. For example, .offset-md-4 moves .col-md-4 over four columns.

.col-md-4
.col-md-4 .offset-md-4
.col-md-3 .offset-md-3
.col-md-3 .offset-md-3
.col-md-6 .offset-md-3
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>