Bootstrap 5 Framework

Bootstrap Grid System Introduction

12 min Lesson 3 of 40

The Bootstrap Grid System is one of the most powerful features of the framework. It allows you to create responsive, mobile-first layouts with ease. In this lesson, we'll explore the fundamentals of the grid system and learn how to create flexible layouts.

Understanding the 12-Column Grid

Bootstrap uses a responsive, mobile-first fluid grid system that scales up to 12 columns as the device or viewport size increases. This 12-column system provides tremendous flexibility in creating layouts.

Why 12 Columns? The number 12 is highly divisible (1, 2, 3, 4, 6, 12), making it perfect for creating various column combinations. You can easily create layouts with 2, 3, 4, or 6 equal columns, or any combination that adds up to 12.

12-Column Division Examples:

columns = 1 column  (full width)
+ 6      = 2 columns (half width each)
+ 4 + 4  = 3 columns (third width each)
+ 3 + 3 + 3 = 4 columns (quarter width each)
+ 2 + 2 + 2 + 2 + 2 = 6 columns (sixth width each)
+ 4      = 2 columns (two-thirds + one-third)
+ 3      = 2 columns (three-quarters + one-quarter)

Grid System Components

The Bootstrap grid system has three main components that work together:

1. Container

The container is the outermost wrapper that holds your rows and columns. It provides proper padding and centers your content.

<div class="container">
    <!-- Rows and columns go here -->
</div>

or

<div class="container-fluid">
    <!-- Full-width rows and columns -->
</div>

2. Row

Rows create horizontal groups of columns. They use flexbox and negative margins to align columns properly.

<div class="row">
    <!-- Columns go here -->
</div>

Important: Columns must be immediate children of rows. Never place columns directly inside containers without a row wrapper, or your layout will break.

3. Column

Columns hold your actual content. They must be placed inside rows.

<div class="col">
    Content here
</div>

or with specific width:

<div class="col-6">
    50% width (6 out of 12 columns)
</div>

Complete Grid Structure

Here's how these components work together:

<div class="container">         <!-- Wrapper -->
    <div class="row">            <!-- Row -->
        <div class="col">        <!-- Column 1 -->
            Content 1
        </div>
        <div class="col">        <!-- Column 2 -->
            Content 2
        </div>
        <div class="col">        <!-- Column 3 -->
            Content 3
        </div>
    </div>
</div>

Container Types in Detail

Bootstrap 5 offers multiple container types to suit different layout needs:

1. .container (Fixed-width, responsive)
<div class="container"></div>

Max widths by breakpoint:
• <576px:    100%
• ≥576px:    540px
• ≥768px:    720px
• ≥992px:    960px
• ≥1200px:   1140px
• ≥1400px:   1320px

2. .container-fluid (Always 100% width)
<div class="container-fluid"></div>

Always spans 100% of viewport width

3. .container-{breakpoint} (Responsive containers)
<div class="container-sm"></div>  <!-- 100% until sm -->
<div class="container-md"></div>  <!-- 100% until md -->
<div class="container-lg"></div>  <!-- 100% until lg -->
<div class="container-xl"></div>  <!-- 100% until xl -->
<div class="container-xxl"></div> <!-- 100% until xxl -->

Choosing Containers:
• Use .container for standard centered layouts
• Use .container-fluid for full-width designs
• Use .container-{breakpoint} for hybrid layouts (fluid on mobile, fixed on larger screens)

Grid Breakpoints

Bootstrap 5 provides six responsive breakpoints that determine when your layout changes:

Bootstrap 5 Breakpoints:

Breakpoint    Class Prefix    Dimensions          Devices
------------------------------------------------------------
Extra small   (none)          <576px             Phones (portrait)
Small         sm              ≥576px             Phones (landscape)
Medium        md              ≥768px             Tablets
Large         lg              ≥992px             Laptops
Extra large   xl              ≥1200px            Desktops
XXL           xxl             ≥1400px            Large desktops

Mobile-First: Bootstrap is mobile-first, meaning styles apply to all screen sizes unless overridden by larger breakpoint classes. Start designing for mobile, then add classes for larger screens.

Basic Column Classes

Bootstrap provides several ways to define column widths:

1. Auto-width Columns

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

Result: Three equal-width columns that automatically divide the row

2. Fixed-width Columns

<div class="container">
    <div class="row">
        <div class="col-6">50% width (6/12)</div>
        <div class="col-3">25% width (3/12)</div>
        <div class="col-3">25% width (3/12)</div>
    </div>
</div>

Result: Specific column widths that always total 12

3. Mixed Columns

<div class="container">
    <div class="row">
        <div class="col-8">Fixed 8 columns</div>
        <div class="col">Auto-width (remaining 4)</div>
    </div>
</div>

Result: Fixed column + auto-width column filling remaining space

Practical Grid Examples

Example 1: Two Equal Columns

<div class="container">
    <div class="row">
        <div class="col-6">
            <h3>Left Column</h3>
            <p>This takes up 6 columns (50% width)</p>
        </div>
        <div class="col-6">
            <h3>Right Column</h3>
            <p>This also takes up 6 columns (50% width)</p>
        </div>
    </div>
</div>

Example 2: Three Equal Columns

<div class="container">
    <div class="row">
        <div class="col-4">
            <h4>Feature 1</h4>
            <p>33.33% width</p>
        </div>
        <div class="col-4">
            <h4>Feature 2</h4>
            <p>33.33% width</p>
        </div>
        <div class="col-4">
            <h4>Feature 3</h4>
            <p>33.33% width</p>
        </div>
    </div>
</div>

Example 3: Sidebar Layout (8-4 Split)

<div class="container">
    <div class="row">
        <div class="col-8">
            <h2>Main Content Area</h2>
            <p>This is the primary content area taking 66.67% width</p>
        </div>
        <div class="col-4">
            <h3>Sidebar</h3>
            <p>This sidebar takes 33.33% width</p>
        </div>
    </div>
</div>

Example 4: Four Equal Columns

<div class="container">
    <div class="row">
        <div class="col-3">Column 1 (25%)</div>
        <div class="col-3">Column 2 (25%)</div>
        <div class="col-3">Column 3 (25%)</div>
        <div class="col-3">Column 4 (25%)</div>
    </div>
</div>

Pro Tip: When using auto-width columns (.col without a number), Bootstrap automatically distributes the available space equally among all columns in the row.

Column Content

Columns can contain any HTML content including text, images, buttons, forms, or even nested grids:

<div class="container">
    <div class="row">
        <div class="col-6">
            <img src="image.jpg" alt="Sample" class="img-fluid">
        </div>
        <div class="col-6">
            <h2>About This Image</h2>
            <p>Description of the image goes here.</p>
            <button class="btn btn-primary">Learn More</button>
        </div>
    </div>
</div>

Grid Gutters (Spacing)

Bootstrap automatically adds horizontal padding (gutters) between columns. The default gutter width is 1.5rem (24px) on each side of a column.

Default Gutters:
<div class="row">
    <div class="col">Column with default gutters</div>
    <div class="col">Column with default gutters</div>
</div>

No Gutters:
<div class="row g-0">
    <div class="col">Column with no gutters</div>
    <div class="col">Column with no gutters</div>
</div>

Custom Gutter Sizes:
<div class="row g-2">Small gutters</div>
<div class="row g-3">Medium gutters</div>
<div class="row g-5">Large gutters</div>

Visual Grid Example

Here's a complete example showing how different column combinations work:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Grid Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <style>
        .demo-col {
            background-color: #e3f2fd;
            border: 2px solid #2196f3;
            padding: 15px;
            margin-bottom: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container my-5">
        <h2>12-Column Grid Examples</h2>

        <!-- One column (full width) -->
        <div class="row">
            <div class="col-12 demo-col">col-12</div>
        </div>

        <!-- Two columns -->
        <div class="row">
            <div class="col-6 demo-col">col-6</div>
            <div class="col-6 demo-col">col-6</div>
        </div>

        <!-- Three columns -->
        <div class="row">
            <div class="col-4 demo-col">col-4</div>
            <div class="col-4 demo-col">col-4</div>
            <div class="col-4 demo-col">col-4</div>
        </div>

        <!-- Four columns -->
        <div class="row">
            <div class="col-3 demo-col">col-3</div>
            <div class="col-3 demo-col">col-3</div>
            <div class="col-3 demo-col">col-3</div>
            <div class="col-3 demo-col">col-3</div>
        </div>

        <!-- Mixed columns -->
        <div class="row">
            <div class="col-8 demo-col">col-8</div>
            <div class="col-4 demo-col">col-4</div>
        </div>
    </div>
</body>
</html>

Practice Exercise:

Create a new HTML file called grid-basics.html
Include Bootstrap 5 CSS from CDN
Create a container with the following layouts:
- One full-width row
- Two equal columns (50/50)
- Three equal columns (33.33/33.33/33.33)
- A sidebar layout with 75% main content and 25% sidebar
Add colored backgrounds to visualize the columns
Add some sample content (headings, paragraphs, images) to each column

Challenge: Create a product showcase with 4 equal-width columns, each containing a product image, title, description, and "Buy Now" button!

Common Grid Mistakes to Avoid

1. Columns Exceeding 12
If your column numbers add up to more than 12, the extra columns will wrap to a new line.

<div class="col-8"></div><div class="col-8"></div>
Result: Second column wraps below (total = 16, exceeds 12)

2. Forgetting the Row
Always wrap columns in a .row div. Without it, columns won't align properly.

3. Nesting Without Proper Structure
When nesting grids, remember: Row → Column → Row → Column

Summary

In this lesson, you've learned:

Bootstrap uses a 12-column grid system for flexible layouts
The grid has three components: Container → Row → Column
Bootstrap 5 offers six responsive breakpoints (xs, sm, md, lg, xl, xxl)
Containers can be fixed-width (.container), fluid (.container-fluid), or responsive (.container-{breakpoint})
Columns can be auto-width (.col), fixed-width (.col-6), or mixed
Column numbers should add up to 12 or less per row
Gutters provide spacing between columns (customizable with .g-* classes)

In the next lesson, we'll explore responsive grid layouts and learn how to create layouts that adapt beautifully to different screen sizes!