Bootstrap Grid System

The Bootstrap Grid System is the core engine behind Bootstrap's responsive layouts. It is built with CSS Flexbox and allows you to create incredibly flexible alignments, scaling up to 12 columns across the page.

How the Grid System Works

Before jumping into code, you need to understand the "Container > Row > Column" hierarchy. To make the grid work properly, you must arrange elements in a very specific order:

Container (.container): The outer wrapper that gives the layout its base padding and centering.
Row (.row): A horizontal wrapper placed inside the container to hold your columns.
Columns (.col): Placed inside rows. Your actual text, images, and content go inside the columns.

Rule of Thumb: Only columns (.col) may be immediate children of rows (.row).

The 12-Column Rule

Bootstrap divides every row into exactly 12 vertical slices (columns).

When you create a column, you tell Bootstrap how many of those 12 slices it should take up. The total number of slices in a single row should generally equal 12. If it exceeds 12, the extra columns will wrap onto a new line.

Basic Example: Equal Width Columns

If you just use the class .col, Bootstrap will automatically divide the row evenly between however many columns you create.

1 of 3

2 of 3

3 of 3

<div class="container">
    <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: Specifying Column Widths

You can tell a column exactly how many parts (out of 12) it should take up using number classes like .col-4 or .col-8.

.col-4 (Takes up 4/12)

.col-8 (Takes up 8/12)

.col-3

.col-6

.col-3

<div class="container">
    <div class="row">
        <!-- Total equals 12 -->
        <div class="col-4">...</div>
        <div class="col-8">...</div>
    </div>
</div>

Responsive Grid Classes (Breakpoints)

The true power of Bootstrap is making your grid change based on screen size using breakpoint classes.

Bootstrap includes six default breakpoints (screen sizes). You can combine these classes to say, "Be 12 columns wide on mobile, but only 6 columns wide on a laptop."

Prefix Class	Screen Size	Example Usage	What it does
`.col-*`	Extra small (<576px)	`.col-12`	Applies to smartphones (all sizes).
`.col-sm-*`	Small (≥576px)	`.col-sm-6`	Applies from landscape phones upwards.
`.col-md-*`	Medium (≥768px)	`.col-md-4`	Applies from tablets upwards.
`.col-lg-*`	Large (≥992px)	`.col-lg-3`	Applies from laptops/desktops upwards.
`.col-xl-*`	Extra large (≥1200px)	`.col-xl-2`	Applies to large desktops/monitors.
`.col-xxl-*`	XX Large (≥1400px)	`.col-xxl-1`	Applies to very large screen televisions/monitors.

Note: Grid classes apply from that specific size and upwards. If you use .col-md-6, it means "take up 6 columns on medium screens, large screens, and extra large screens" (unless overridden by another class like .col-lg-4). On smaller screens, it will stack to 100% width.

Key Rules for the Grid System

Rows (.row) are used to create horizontal groups of columns.
Rows must be placed within a .container or .container-fluid for proper alignment.
Content should be placed within columns, and only columns may be immediate children of rows.
If more than 12 columns are placed within a single row, the extra columns will wrap onto a new line.
Column classes indicate the number of columns you'd like to use out of the possible 12 per row (e.g., .col-4 takes a third of the row).

« Previous Lesson Next Lesson »