Bootstrap's grid system allows up to 12 columns across the page, you can create the page layout on the basics of these 12 columns. Bootstrap's grid system is responsive, and the columns will re-arrange automatically depending on the screen size. The Grid classes can be combined to create more dynamic and flexible layouts.

Responsive Breakpoint

Since Bootstrap is developed to be mobile first, we use media queries to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up the elements as the viewport changes.

Bootstrap uses six default breakpoints, referred to as grid tiers, for building responsive layout, grid system, and components

Example 1: Create three equal columns using bootstrap classes.

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

Example 2: Responsive Columns: Make 4 column of equal size, On mobile phones or screens that are less than 576px wide, the columns will automatically stack on top of each other.

<div class="container">
  <div class="row">
    <div class="col-sm-3">.col-sm-3</div>
    <div class="col-sm-3">.col-sm-3</div>
    <div class="col-sm-3">.col-sm-3</div>
    <div class="col-sm-3">.col-sm-3</div>
  </div>
</div>

Two Unequal Responsive Columns

<div class="row">
   <div class="col-sm-4">.col-sm-4</div>
   <div class="col-sm-8">.col-sm-8</div>
</div> 

Three Unequal Responsive Columns

<div class="row">
   <div class="col-sm-2">.col-sm-2</div>
   <div class="col-sm-8">.col-sm-8</div>
   <div class="col-sm-2">.col-sm-2</div>
</div> 

Auto-layout columns

Three Equal Columns on all devices

<div class="container">
  <div class="row">
    <div class="col">.col</div>
    <div class="col">.col</div>
    <div class="col">.col</div>
  </div>
</div>

The above example creates three equal-width columns on small, medium, large, and extra large devices.

Example 2: Setting one column width

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Example 3:

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Mix and match

<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 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>

Horizontal alignment

<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>

No gutters

Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on '.rows'

The gutters between columns in our predefined grid classes can be removed with '.no-gutters'. This removes the negative margins from .row and the horizontal padding from all immediate children columns.

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Reordering Columns

Use .order- classes for controlling the visual order of your content. These classes are responsive, so you can set the order by breakpoint (e.g: .order-1, .order-md-2). Includes 1 through 12 across all five grid tiers.

<div class="container">
    <div class="row">
        <div class="col">
            First, but unordered
        </div>
        <div class="col order-12">
            Second, but last
        </div>
        <div class="col order-1">
            Third, but first
        </div>
    </div>
</div>

There are also responsive .order-first and .order-last classes that change the order of an element by applying order: -1 and order: 13 (order: $columns + 1), respectively.

<div class="container">
    <div class="row">
        <div class="col order-last">
            First, but last
        </div>
        <div class="col">
            Second, but unordered
        </div>
        <div class="col order-first">
            Third, but first
        </div>
    </div>
</div>

Offsetting columns

You can offset grid columns using .offset- grid classes

<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>