Bootstrap 5 Framework

Responsive Grid Layouts

13 min Lesson 4 of 40

Creating responsive layouts that adapt to different screen sizes is the heart of modern web design. In this lesson, we'll master Bootstrap's responsive grid classes and learn how to build layouts that look perfect on any device.

Understanding Responsive Column Sizing

Bootstrap's responsive grid system allows you to specify different column widths at different breakpoints. This means your layout can adapt perfectly to phones, tablets, laptops, and desktops.

Mobile-First Approach: Bootstrap applies styles from the smallest screen size upward. A class like col-md-6 means "6 columns wide starting from medium screens and above." On smaller screens, it will be full width unless you specify otherwise.

Responsive Column Classes

Bootstrap provides responsive column classes for each breakpoint:

Column Class Format:
.col-{breakpoint}-{size}

Breakpoint Options:
(none)    - Extra small (<576px) - applies to all sizes
sm        - Small (≥576px)
md        - Medium (≥768px)
lg        - Large (≥992px)
xl        - Extra large (≥1200px)
xxl       - Extra extra large (≥1400px)

Size Options:
1 to 12   - Number of columns to span
auto      - Auto width based on content

Examples:
.col-6           - 6 columns at all sizes
.col-sm-6        - 6 columns from small screens up
.col-md-4        - 4 columns from medium screens up
.col-lg-3        - 3 columns from large screens up
.col-xl-2        - 2 columns from extra large screens up

Basic Responsive Layout Example

Let's create a layout that stacks on mobile but becomes multi-column on larger screens:

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h3>Column 1</h3>
            <p>Full width on mobile, half width on medium+ screens</p>
        </div>
        <div class="col-md-6">
            <h3>Column 2</h3>
            <p>Full width on mobile, half width on medium+ screens</p>
        </div>
    </div>
</div>

Behavior:
Mobile (<768px):   Each column is 100% width (stacked)
Tablet+ (≥768px):  Each column is 50% width (side by side)

Why This Works: Without a breakpoint specified, columns default to full width on the smallest screens. The col-md-6 class kicks in at 768px and above, making each column take half the width.

Combining Multiple Breakpoints

You can combine multiple responsive classes on the same element to create complex adaptive layouts:

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

Behavior:
Extra Small (<576px):  1 column per row (col-12)
Small (≥576px):        2 columns per row (col-sm-6)
Medium (≥768px):       3 columns per row (col-md-4)
Large (≥992px):        4 columns per row (col-lg-3)

Auto-Layout Columns

Bootstrap provides auto-layout columns that automatically distribute space equally:

1. Equal-Width Columns

<div class="container">
    <div class="row">
        <div class="col">
            Equal width column
        </div>
        <div class="col">
            Equal width column
        </div>
        <div class="col">
            Equal width column
        </div>
    </div>
</div>

Result: Three columns, each taking exactly 33.33% width

2. Equal-Width Multi-Row

<div class="container">
    <div class="row">
        <div class="col">Column 1</div>
        <div class="col">Column 2</div>
        <div class="w-100"></div> <!-- Force new row -->
        <div class="col">Column 3</div>
        <div class="col">Column 4</div>
    </div>
</div>

Result: Two rows with two equal columns each

3. Variable Width Content

<div class="container">
    <div class="row">
        <div class="col">
            Equal width
        </div>
        <div class="col-auto">
            Width based on content
        </div>
        <div class="col">
            Equal width
        </div>
    </div>
</div>

Result: Middle column sizes to content, side columns share remaining space equally

Column Wrapping

When columns exceed 12 in a row, they automatically wrap to the next line:

<div class="container">
    <div class="row">
        <div class="col-9">9 columns</div>
        <div class="col-4">4 columns (wraps because 9+4=13)</div>
        <div class="col-6">6 columns</div>
    </div>
</div>

Visual Result:
Row 1: [9 columns wide]
Row 2: [4 columns][6 columns][2 empty]

Watch Out: While column wrapping works, it's usually better to use explicit rows for clarity and predictable behavior. Wrapping can cause unexpected layouts on different screen sizes.

Practical Responsive Layout Examples

Example 1: Product Grid (Responsive Cards)

<div class="container">
    <div class="row">
        <!-- Product 1 -->
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <div class="card">
                <img src="product1.jpg" class="card-img-top" alt="Product 1">
                <div class="card-body">
                    <h5 class="card-title">Product Name</h5>
                    <p class="card-text">$29.99</p>
                    <button class="btn btn-primary">Add to Cart</button>
                </div>
            </div>
        </div>

        <!-- Repeat for more products -->
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <!-- Product 2 -->
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <!-- Product 3 -->
        </div>
        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
            <!-- Product 4 -->
        </div>
    </div>
</div>

Layout Behavior:
Mobile:    1 column (full width)
Small:     2 columns per row
Medium:    3 columns per row
Large+:    4 columns per row

Example 2: Blog Layout (Main Content + Sidebar)

<div class="container">
    <div class="row">
        <!-- Main Content -->
        <div class="col-12 col-lg-8">
            <article>
                <h1>Blog Post Title</h1>
                <p>Blog post content goes here...</p>
            </article>
        </div>

        <!-- Sidebar -->
        <div class="col-12 col-lg-4">
            <aside>
                <h3>Recent Posts</h3>
                <ul>
                    <li>Post 1</li>
                    <li>Post 2</li>
                    <li>Post 3</li>
                </ul>
            </aside>
        </div>
    </div>
</div>

Layout Behavior:
Mobile/Tablet (<992px):  Sidebar below content (both full width)
Desktop (≥992px):         Sidebar beside content (66.67% / 33.33%)

Example 3: Feature Section

<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 col-xl-3">
            <div class="text-center">
                <i class="bi bi-lightning fs-1 text-primary"></i>
                <h3>Fast</h3>
                <p>Lightning fast performance</p>
            </div>
        </div>

        <div class="col-12 col-md-6 col-xl-3">
            <div class="text-center">
                <i class="bi bi-shield-check fs-1 text-success"></i>
                <h3>Secure</h3>
                <p>Bank-level security</p>
            </div>
        </div>

        <div class="col-12 col-md-6 col-xl-3">
            <div class="text-center">
                <i class="bi bi-phone fs-1 text-info"></i>
                <h3>Responsive</h3>
                <p>Works on all devices</p>
            </div>
        </div>

        <div class="col-12 col-md-6 col-xl-3">
            <div class="text-center">
                <i class="bi bi-heart fs-1 text-danger"></i>
                <h3>Loved</h3>
                <p>Trusted by thousands</p>
            </div>
        </div>
    </div>
</div>

Layout Behavior:
Mobile (<768px):        1 column (stacked)
Tablet (768px-1199px):  2 columns per row
Desktop (≥1200px):      4 columns per row

Example 4: Dashboard Layout

<div class="container-fluid">
    <div class="row">
        <!-- Sidebar Navigation -->
        <div class="col-12 col-md-3 col-lg-2 bg-dark text-white">
            <nav>
                <h4>Dashboard</h4>
                <ul class="nav flex-column">
                    <li class="nav-item">Home</li>
                    <li class="nav-item">Analytics</li>
                    <li class="nav-item">Reports</li>
                </ul>
            </nav>
        </div>

        <!-- Main Content Area -->
        <div class="col-12 col-md-9 col-lg-10">
            <div class="row">
                <!-- Stats Cards -->
                <div class="col-12 col-sm-6 col-xl-3">
                    <div class="card">
                        <div class="card-body">
                            <h5>Total Users</h5>
                            <h2>1,234</h2>
                        </div>
                    </div>
                </div>
                <!-- More stat cards... -->
            </div>
        </div>
    </div>
</div>

Layout Behavior:
Mobile (<768px):      Sidebar on top, full width content below
Tablet (≥768px):      Sidebar 25%, content 75%
Desktop (≥992px):     Sidebar 16.67%, content 83.33%

Complete Responsive Page Example

Here's a complete example combining multiple responsive techniques:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Layout</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
          rel="stylesheet">
</head>
<body>
    <!-- Header -->
    <header class="bg-primary text-white py-3">
        <div class="container">
            <h1>My Responsive Website</h1>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="bg-light py-5">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-12 col-lg-6">
                    <h2>Welcome to Our Site</h2>
                    <p class="lead">Build amazing responsive websites</p>
                    <button class="btn btn-primary btn-lg">Get Started</button>
                </div>
                <div class="col-12 col-lg-6">
                    <img src="hero-image.jpg" class="img-fluid" alt="Hero">
                </div>
            </div>
        </div>
    </section>

    <!-- Features -->
    <section class="py-5">
        <div class="container">
            <h2 class="text-center mb-4">Features</h2>
            <div class="row">
                <div class="col-12 col-sm-6 col-lg-3 mb-4">
                    <div class="card h-100">
                        <div class="card-body text-center">
                            <h4>Feature 1</h4>
                            <p>Description</p>
                        </div>
                    </div>
                </div>
                <!-- Repeat for 3 more features -->
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-dark text-white py-4">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-4">
                    <h5>About</h5>
                    <p>Company info</p>
                </div>
                <div class="col-12 col-md-4">
                    <h5>Links</h5>
                    <ul class="list-unstyled">
                        <li>Home</li>
                        <li>About</li>
                    </ul>
                </div>
                <div class="col-12 col-md-4">
                    <h5>Contact</h5>
                    <p>Email: info@example.com</p>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js">
    </script>
</body>
</html>

Testing Tip: Always test your responsive layouts by resizing your browser window or using browser DevTools device emulation. Check all breakpoints to ensure smooth transitions.

Responsive Design Best Practices

1. Start Mobile-First
Design for the smallest screen first, then enhance for larger screens. Use col-12 or just col as your base, then add breakpoint classes.

2. Use Semantic Breakpoints
Choose breakpoints based on your content, not specific devices. If your layout breaks at 650px, use the closest Bootstrap breakpoint (sm at 576px or md at 768px).

3. Keep It Simple
Don't over-complicate with too many breakpoint classes. Often, 2-3 breakpoints are enough: mobile (col-12), tablet (col-md-X), desktop (col-lg-X).

4. Consistent Spacing
Use Bootstrap's spacing utilities (mt, mb, py, etc.) consistently across breakpoints for visual harmony.

Practice Exercise:

Create a responsive page called responsive-portfolio.html
Include the following sections:
- Header with navigation
- Hero section with text and image (side-by-side on desktop, stacked on mobile)
- Project gallery with 1 column on mobile, 2 on tablet, 3 on desktop
- About section with 2 columns on desktop, stacked on mobile
- Footer with 3 columns on desktop, stacked on mobile
Test your layout at different screen sizes
Add appropriate spacing and styling

Challenge: Create a responsive pricing table with 1 column on mobile, 2 columns on tablet, and 4 columns on desktop. Each pricing card should have equal height!

Common Responsive Patterns

Pattern 1: Stack-to-Horizontal
<div class="col-md-6"></div>
Mobile: Stacked (100%)
Desktop: Side-by-side (50/50)

Pattern 2: 1-2-4 Grid
<div class="col-12 col-md-6 col-lg-3"></div>
Mobile: 1 column
Tablet: 2 columns
Desktop: 4 columns

Pattern 3: Sidebar Toggle
<div class="col-12 col-lg-8">Main</div>
<div class="col-12 col-lg-4">Sidebar</div>
Mobile: Sidebar below main (both 100%)
Desktop: Sidebar beside main (66.67% / 33.33%)

Pattern 4: Equal Height Cards
<div class="col-sm-6 col-lg-4">
    <div class="card h-100">Content</div>
</div>
Cards stretch to equal height in each row

Summary

In this lesson, you've mastered:

Responsive column classes with breakpoints (col-sm, col-md, col-lg, etc.)
Combining multiple breakpoint classes for complex responsive layouts
Auto-layout columns that distribute space equally
Variable-width columns based on content
Column wrapping behavior when exceeding 12 columns
Practical responsive patterns for common layouts (product grids, blogs, dashboards)
Mobile-first design approach and best practices
Testing and optimizing responsive layouts

You now have a solid foundation in Bootstrap's grid system! In the next module, we'll explore Bootstrap's typography, colors, and content styling to make your layouts beautiful.