Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

Mobile First Strategy

The code for Bootstrap starts by targeting smaller screens like mobile devices, tablets, and then expands for larger screens such as laptops, desktops. 

Columns

Bootstrap's grid system allows up to 12 columns across the page. You can group the columns together to create wider columns.

How It Works

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. First, rows are placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding. 

<div class="container">

Use rows to create horizontal groups of columns.

<div class="row">

Then, content is placed within columns. Columns are immediate children of rows.

Two-column Layout

A basic grid system that starts out stacked on mobiles or tablets (small devices), and becomes horizontal on desktops (medium or large devices).

<div class="container">
<h1>Hello World!</h1>
<div class="row">
<div class="col-sm-6">
<p>First Column...</p>
</div>
<div class="col-sm-6">
<p>Second Column...</p>
</div>
</div>
</div>

The sum of column spans should always add up to 12.

Bootstrap 4 Grid System

Containers provide a means to center the site’s contents. Use .container for fixed width or .container-fluid for full width. Rows are horizontal groups of columns that ensure columns are lined up properly. Use .row to ensure all the content is aligned properly down the left side.

Content is placed within columns, and only columns are immediate children of rows. Grid columns without a set width automatically have equal widths. For example, four instances of .col-sm will each automatically be 25% wide for small breakpoints.

Grid Tiers

There are five grid tiers, one for each responsive breakpoint:

  1. extra small (all breakpoints)
  2. small
  3. medium
  4. large
  5. extra large

Grid tiers are based on minimum widths, which means they apply to that one tier and all those above it. For example, .col-sm-4 applies to small, medium, large, and extra large devices.