Bootstrap Grid System

What is the Grid System?

Bootstrap's grid system is a powerful mobile-first flexbox grid system for building layouts of all shapes and sizes. It's based on a 12-column system with multiple tiers, powerful predefined classes, and Sass mixins.

How the Grid System Works

The grid system uses a series of containers, rows, and columns to layout and align content:

Container - Provides a way to center and horizontally pad content
Row - Horizontal groups of columns
Column - Where content is placed

Basic Structure

html

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

Breakpoint System

Bootstrap uses the following breakpoints to create responsive layouts:

Breakpoint	Class Prefix	Size
Extra small	None	`<576px`
Small	`sm`	`≥576px`
Medium	`md`	`≥768px`
Large	`lg`	`≥992px`
Extra large	`xl`	`≥1200px`
Extra extra large	`xxl`	`≥1400px`

Column Classes

1. Auto-width Columns

html

<div class="container">
    <div class="row">
        <div class="col">Auto width</div>
        <div class="col">Auto width</div>
        <div class="col">Auto width</div>
    </div>
</div>

2. Specified Width Columns

Use numbers to specify how many columns each element should span (1-12):

html

<div class="container">
    <div class="row">
        <div class="col-4">4 columns wide</div>
        <div class="col-8">8 columns wide</div>
    </div>
    <div class="row">
        <div class="col-6">6 columns wide</div>
        <div class="col-6">6 columns wide</div>
    </div>
</div>

3. Responsive Columns

Specify different column widths for different screen sizes:

html

<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-4">
            Responsive column
        </div>
        <div class="col-12 col-md-6 col-lg-4">
            Responsive column
        </div>
        <div class="col-12 col-md-12 col-lg-4">
            Responsive column
        </div>
    </div>
</div>

Practical Examples

Basic Grid Example

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Grid System</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .demo-col {
            background-color: #e9ecef;
            border: 1px solid #dee2e6;
            padding: 10px;
            margin-bottom: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Bootstrap Grid System Examples</h1>
        
        <!-- Equal width columns -->
        <h2>Equal Width Columns</h2>
        <div class="row">
            <div class="col demo-col">Column 1</div>
            <div class="col demo-col">Column 2</div>
            <div class="col demo-col">Column 3</div>
        </div>
        
        <!-- Specified width columns -->
        <h2>Specified Width Columns</h2>
        <div class="row">
            <div class="col-3 demo-col">3 columns</div>
            <div class="col-6 demo-col">6 columns</div>
            <div class="col-3 demo-col">3 columns</div>
        </div>
        
        <!-- Responsive columns -->
        <h2>Responsive Columns</h2>
        <div class="row">
            <div class="col-12 col-md-6 col-lg-3 demo-col">
                Responsive 1
            </div>
            <div class="col-12 col-md-6 col-lg-3 demo-col">
                Responsive 2
            </div>
            <div class="col-12 col-md-6 col-lg-3 demo-col">
                Responsive 3
            </div>
            <div class="col-12 col-md-6 col-lg-3 demo-col">
                Responsive 4
            </div>
        </div>
    </div>
</body>
</html>

Column Alignment

Vertical Alignment

Use flexbox alignment utility classes:

html

<!-- Top alignment -->
<div class="row align-items-start">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
</div>

<!-- Center alignment -->
<div class="row align-items-center">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
</div>

<!-- Bottom alignment -->
<div class="row align-items-end">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
</div>

Horizontal Alignment

html

<!-- Left alignment -->
<div class="row justify-content-start">
    <div class="col-4">Column 1</div>
    <div class="col-4">Column 2</div>
</div>

<!-- Center alignment -->
<div class="row justify-content-center">
    <div class="col-4">Column 1</div>
    <div class="col-4">Column 2</div>
</div>

<!-- Right alignment -->
<div class="row justify-content-end">
    <div class="col-4">Column 1</div>
    <div class="col-4">Column 2</div>
</div>

<!-- Space between -->
<div class="row justify-content-between">
    <div class="col-4">Column 1</div>
    <div class="col-4">Column 2</div>
</div>

Column Offsetting

Use offset classes to move columns:

html

<div class="row">
    <div class="col-md-4">Normal column</div>
    <div class="col-md-4 offset-md-4">Offset 4 columns</div>
</div>

<div class="row">
    <div class="col-md-3 offset-md-3">Offset 3 columns</div>
    <div class="col-md-3 offset-md-3">Offset 3 columns</div>
</div>

Column Ordering

Use order classes to change the display order of columns:

html

<div class="row">
    <div class="col order-3">First (displayed third)</div>
    <div class="col order-1">Second (displayed first)</div>
    <div class="col order-2">Third (displayed second)</div>
</div>

Nesting Grids

You can nest new rows and columns within columns:

html

<div class="row">
    <div class="col-sm-3">
        First level column
    </div>
    <div class="col-sm-9">
        <div class="row">
            <div class="col-8 col-sm-6">
                Nested column 1
            </div>
            <div class="col-4 col-sm-6">
                Nested column 2
            </div>
        </div>
    </div>
</div>

Gutters

Default Gutters

There are default gutters between rows and columns.

Custom Gutters

html

<!-- No gutters -->
<div class="row g-0">
    <div class="col-sm-6 col-md-8">Column 1</div>
    <div class="col-6 col-md-4">Column 2</div>
</div>

<!-- Large gutters -->
<div class="row g-5">
    <div class="col-sm-6 col-md-8">Column 1</div>
    <div class="col-6 col-md-4">Column 2</div>
</div>

Common Layout Patterns

1. Two-column Layout

html

<div class="row">
    <div class="col-md-8">Main Content</div>
    <div class="col-md-4">Sidebar</div>
</div>

2. Three-column Layout

html

<div class="row">
    <div class="col-md-3">Left Sidebar</div>
    <div class="col-md-6">Main Content</div>
    <div class="col-md-3">Right Sidebar</div>
</div>

3. Card Grid

html

<div class="row">
    <div class="col-lg-4 col-md-6 mb-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Card 1</h5>
                <p class="card-text">Card content</p>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6 mb-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Card 2</h5>
                <p class="card-text">Card content</p>
            </div>
        </div>
    </div>
    <div class="col-lg-4 col-md-6 mb-4">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Card 3</h5>
                <p class="card-text">Card content</p>
            </div>
        </div>
    </div>
</div>

Best Practices

Mobile-first: Design for small screens first, then expand to larger screens
Use semantic column widths: Choose meaningful column width combinations
Avoid excessive nesting: Keep grid structure simple and clear
Test responsiveness: Test layout effects on different devices
Use offsets appropriately: Use offsets appropriately to create whitespace

Next Steps

Now that you've mastered the Bootstrap grid system, we'll next learn about typography.

Next Chapter: Bootstrap Typography →

Bootstrap Grid System ​

What is the Grid System? ​

How the Grid System Works ​

Basic Structure ​

Breakpoint System ​

Column Classes ​

1. Auto-width Columns ​

2. Specified Width Columns ​

3. Responsive Columns ​

Practical Examples ​

Basic Grid Example ​

Column Alignment ​

Vertical Alignment ​

Horizontal Alignment ​

Column Offsetting ​

Column Ordering ​

Nesting Grids ​

Gutters ​

Default Gutters ​

Custom Gutters ​

Common Layout Patterns ​

1. Two-column Layout ​

2. Three-column Layout ​

3. Card Grid ​

Best Practices ​

Next Steps ​

Bootstrap Grid System

What is the Grid System?

How the Grid System Works

Basic Structure

Breakpoint System

Column Classes

1. Auto-width Columns

2. Specified Width Columns

3. Responsive Columns

Practical Examples

Basic Grid Example

Column Alignment

Vertical Alignment

Horizontal Alignment

Column Offsetting

Column Ordering

Nesting Grids

Gutters

Default Gutters

Custom Gutters

Common Layout Patterns

1. Two-column Layout

2. Three-column Layout

3. Card Grid

Best Practices

Next Steps