Bootstrap Grid System

The grid system is the backbone of Bootstrap. It uses a series of containers, rows, and columns to layout and align content responsively.

How the Grid Works

• Bootstrap uses a 12-column grid system
• Columns must be placed inside rows
• Rows must be placed inside a container
• Content goes inside columns

The 12-Column Concept

<!-- Full width (12 columns) -->
<div class="col-md-12">Full width</div>

<!-- Two equal halves (6 + 6 = 12) -->
<div class="col-md-6">Half</div>
<div class="col-md-6">Half</div>

<!-- Three equal thirds (4 + 4 + 4 = 12) -->
<div class="col-md-4">Third</div>
<div class="col-md-4">Third</div>
<div class="col-md-4">Third</div>

<!-- Sidebar + Content (3 + 9 = 12) -->
<div class="col-md-3">Sidebar</div>
<div class="col-md-9">Main content</div>

Grid Classes

Bootstrap has four grid class prefixes for different screen sizes:

• col-xs-* — Extra small (<768px) — phones
• col-sm-* — Small (≥768px) — tablets
• col-md-* — Medium (≥992px) — desktops
• col-lg-* — Large (≥1200px) — large desktops

Basic Example

<div class="container">
    <div class="row">
        <div class="col-md-4">Column 1</div>
        <div class="col-md-4">Column 2</div>
        <div class="col-md-4">Column 3</div>
    </div>
</div>

The columns automatically stack vertically on smaller screens if the screen is below the breakpoint size.