Bootstrap 5 Framework

Responsive Design Patterns

13 min Lesson 8 of 40

Responsive Design Patterns

Responsive design is at the heart of modern web development. Bootstrap 5's mobile-first approach and powerful utilities make it easy to create layouts that adapt beautifully to any screen size. Let's explore proven responsive design patterns.

1. Mobile-First Approach

Bootstrap 5 is built mobile-first, meaning base styles target small screens and scale up:

<!-- Mobile-first thinking: Start with mobile layout -->
<div class="container">
    <!-- This is full-width on mobile, half-width on medium and up -->
    <div class="row">
        <div class="col-12 col-md-6">
            <h3>Content Box</h3>
            <p>Starts at 100% width (mobile), then becomes 50% at md breakpoint</p>
        </div>
    </div>
</div>

<!-- Progressive enhancement: Add complexity as screens grow -->
<div class="row">
    <!-- Mobile: 1 column (100%) -->
    <!-- Tablet: 2 columns (50% each) -->
    <!-- Desktop: 3 columns (33.33% each) -->
    <!-- Large Desktop: 4 columns (25% each) -->
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">Box 1</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">Box 2</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">Box 3</div>
    <div class="col-12 col-sm-6 col-md-4 col-lg-3">Box 4</div>
</div>

<!-- Simplified with row-cols -->
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
    <div class="col">Box 1</div>
    <div class="col">Box 2</div>
    <div class="col">Box 3</div>
    <div class="col">Box 4</div>
</div>
        

Mobile-First Breakpoints:

No prefix (xs) - Base styles for all screens (<576px)
sm - Small devices (≥576px)
md - Medium devices (≥768px)
lg - Large devices (≥992px)
xl - Extra large devices (≥1200px)
xxl - Extra extra large devices (≥1400px)

2. Visibility and Display Control

Show or hide elements based on screen size for optimal user experience:

<!-- Hide on mobile, show on desktop -->
<div class="d-none d-md-block">
    <p>This content only appears on medium screens and larger</p>
</div>

<!-- Show on mobile, hide on desktop -->
<div class="d-block d-md-none">
    <p>This content only appears on mobile</p>
</div>

<!-- Show only on specific breakpoint range -->
<div class="d-none d-md-block d-lg-none">
    <p>This only appears on medium screens (md)</p>
</div>

<!-- Practical example: Different navigation for mobile vs desktop -->
<nav>
    <!-- Mobile: Hamburger menu -->
    <div class="d-md-none">
        <button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#mobileNav">
            ☰ Menu
        </button>
        <div class="collapse" id="mobileNav">
            <ul class="list-unstyled">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
    </div>

    <!-- Desktop: Horizontal menu -->
    <div class="d-none d-md-block">
        <ul class="nav">
            <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
            <li class="nav-item"><a class="nav-link" href="#">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        </ul>
    </div>
</nav>

<!-- Display utilities -->
<div class="d-inline d-md-block">Inline on mobile, block on desktop</div>
<div class="d-flex d-md-inline-flex">Flex on mobile, inline-flex on desktop</div>
        

Display Utility Pattern:

d-{breakpoint}-{value} where value is: none, block, inline, inline-block, flex, inline-flex
Always think: "At this breakpoint and up, display as..."
Use d-none first, then override at larger breakpoints

3. Responsive Images

Make images scale properly and load efficiently across devices:

<!-- Basic responsive image -->
<img src="photo.jpg" class="img-fluid" alt="Description">
<!-- img-fluid = max-width: 100%; height: auto; -->

<!-- Responsive image with constraints -->
<div style="max-width: 600px;">
    <img src="photo.jpg" class="img-fluid" alt="Never exceeds 600px">
</div>

<!-- Rounded corners responsive -->
<img src="photo.jpg" class="img-fluid rounded" alt="Rounded">
<img src="photo.jpg" class="img-fluid rounded-circle" alt="Circle">
<img src="photo.jpg" class="img-fluid rounded-pill" alt="Pill">

<!-- Thumbnail style -->
<img src="photo.jpg" class="img-thumbnail" alt="Thumbnail">

<!-- Responsive background images with CSS -->
<div class="hero-banner" style="
    background-image: url('hero.jpg');
    background-size: cover;
    background-position: center;
    min-height: 300px;
">
    <div class="container">
        <h1>Hero Content</h1>
    </div>
</div>

<!-- Aspect ratio containers for images/videos -->
<div class="ratio ratio-16x9">
    <img src="video-thumbnail.jpg" alt="16:9 aspect ratio">
</div>

<div class="ratio ratio-4x3">
    <img src="old-tv.jpg" alt="4:3 aspect ratio">
</div>

<div class="ratio ratio-1x1">
    <img src="square.jpg" alt="Square 1:1 aspect ratio">
</div>

<!-- Responsive image grid -->
<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-2">
    <div class="col">
        <img src="gallery1.jpg" class="img-fluid" alt="Gallery">
    </div>
    <div class="col">
        <img src="gallery2.jpg" class="img-fluid" alt="Gallery">
    </div>
    <!-- More images... -->
</div>

<!-- Art direction with picture element -->
<picture>
    <source media="(min-width: 1200px)" srcset="desktop-wide.jpg">
    <source media="(min-width: 768px)" srcset="tablet.jpg">
    <img src="mobile.jpg" class="img-fluid" alt="Responsive">
</picture>
        

Image Best Practices:

Always use img-fluid for content images
Provide appropriate alt text for accessibility
Use loading="lazy" for images below the fold
Consider WebP format with fallbacks for better performance
Use ratio classes to prevent layout shift

4. Responsive Typography

Adjust text sizes and spacing for different screen sizes:

<!-- Responsive display headings -->
<h1 class="display-1">Largest Display</h1>
<h1 class="display-2">Large Display</h1>
<h1 class="display-3">Medium Display</h1>
<h1 class="display-4">Small Display</h1>
<h1 class="display-5">Smaller Display</h1>
<h1 class="display-6">Smallest Display</h1>

<!-- Lead paragraph for intro text -->
<p class="lead">
    This paragraph stands out from regular text and scales responsively.
</p>

<!-- Responsive font sizes with utilities -->
<p class="fs-1">Font size 1 (largest)</p>
<p class="fs-2">Font size 2</p>
<p class="fs-3">Font size 3</p>
<p class="fs-4">Font size 4</p>
<p class="fs-5">Font size 5</p>
<p class="fs-6">Font size 6 (smallest)</p>

<!-- Text alignment that changes with breakpoint -->
<p class="text-center text-md-start">
    Centered on mobile, left-aligned on desktop
</p>

<p class="text-start text-md-center text-lg-end">
    Left on mobile, center on tablet, right on desktop
</p>

<!-- Responsive text truncation -->
<p class="text-truncate" style="max-width: 200px;">
    This text will be truncated with an ellipsis if it's too long
</p>

<!-- Responsive line breaks -->
<h2>
    Long Title That Might<br class="d-none d-md-inline"> Break on Desktop
</h2>

<!-- Custom responsive typography -->
<h1 class="mb-2 mb-md-4">
    Heading with responsive margin
</h1>

<p class="px-3 px-md-5">
    Content with responsive horizontal padding
</p>
        

Typography Tips:

Display classes (display-1 to display-6) are responsive by default
Use lead class for prominent paragraphs
Combine text utilities with responsive breakpoints
Adjust line-height and letter-spacing for readability on different screens

5. Responsive Dashboard Layout

Build a comprehensive responsive dashboard that adapts to all screen sizes:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Dashboard</title>
    <link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid">
        <!-- Header -->
        <header class="row bg-dark text-white py-3 mb-3">
            <div class="col">
                <div class="d-flex justify-content-between align-items-center">
                    <h1 class="h3 mb-0">Dashboard</h1>
                    <!-- Mobile: Icon only, Desktop: Text + Icon -->
                    <button class="btn btn-light">
                        <span class="d-none d-md-inline">Logout</span>
                        <span>🚪</span>
                    </button>
                </div>
            </div>
        </header>

        <div class="row">
            <!-- Sidebar: Full width on mobile, sidebar on desktop -->
            <aside class="col-12 col-md-3 col-lg-2 mb-3">
                <nav class="nav flex-column">
                    <a class="nav-link active" href="#">📊 Dashboard</a>
                    <a class="nav-link" href="#">👥 Users</a>
                    <a class="nav-link" href="#">📈 Analytics</a>
                    <a class="nav-link" href="#">⚙️ Settings</a>
                </nav>
            </aside>

            <!-- Main Content -->
            <main class="col-12 col-md-9 col-lg-10">
                <!-- Stats Cards: Stack on mobile, row on tablet+ -->
                <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-3 mb-4">
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <h6 class="card-subtitle text-muted mb-2">Total Users</h6>
                                <h2 class="card-title mb-0">12,543</h2>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <h6 class="card-subtitle text-muted mb-2">Revenue</h6>
                                <h2 class="card-title mb-0">$45,890</h2>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <h6 class="card-subtitle text-muted mb-2">Orders</h6>
                                <h2 class="card-title mb-0">892</h2>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card">
                            <div class="card-body">
                                <h6 class="card-subtitle text-muted mb-2">Growth</h6>
                                <h2 class="card-title mb-0">+23%</h2>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Charts: Stack on mobile, side-by-side on desktop -->
                <div class="row g-3">
                    <div class="col-12 col-lg-8">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">Sales Overview</h5>
                                <div style="height: 300px; background: #f0f0f0; display: flex; align-items: center; justify-content: center;">
                                    Chart Area
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 col-lg-4">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title">Recent Activity</h5>
                                <ul class="list-unstyled">
                                    <li class="mb-2">✅ New user registered</li>
                                    <li class="mb-2">💰 Payment received</li>
                                    <li class="mb-2">📦 Order shipped</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>
</body>
</html>
        

6. Common Responsive Patterns

Proven patterns for responsive layouts:

<!-- Pattern 1: Stacked to Horizontal -->
<div class="row">
    <div class="col-12 col-md-6">Stack on mobile, side-by-side on desktop</div>
    <div class="col-12 col-md-6">Stack on mobile, side-by-side on desktop</div>
</div>

<!-- Pattern 2: Sidebar Layout -->
<div class="row">
    <aside class="col-12 col-lg-3 mb-3 mb-lg-0">Sidebar</aside>
    <main class="col-12 col-lg-9">Main Content</main>
</div>

<!-- Pattern 3: Card Grid -->
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-4">
    <div class="col"><div class="card">...</div></div>
    <div class="col"><div class="card">...</div></div>
    <div class="col"><div class="card">...</div></div>
</div>

<!-- Pattern 4: Hero with Centered Content -->
<div class="row align-items-center justify-content-center" style="min-height: 60vh;">
    <div class="col-12 col-md-8 col-lg-6 text-center">
        <h1 class="display-3">Hero Title</h1>
        <p class="lead">Subtitle text</p>
        <button class="btn btn-primary btn-lg">CTA Button</button>
    </div>
</div>

<!-- Pattern 5: Responsive Table -->
<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th class="d-none d-md-table-cell">Phone</th>
                <th class="d-none d-lg-table-cell">Company</th>
            </tr>
        </thead>
        <tbody>
            <!-- Table rows -->
        </tbody>
    </table>
</div>
        

Common Responsive Mistakes:

Not testing on actual devices - emulators miss touch interactions
Using fixed heights - causes overflow on smaller screens
Forgetting about landscape orientation on mobile
Text too small on mobile (minimum 16px for body text)
Touch targets too small (minimum 44x44px)
Not considering slow mobile connections

Practice Exercise

Create a fully responsive landing page with these sections:

Navigation Bar:
- Logo on left, menu on right
- Mobile: Collapse menu into hamburger icon
- Desktop: Horizontal menu items
Hero Section:
- Background image with text overlay
- Centered heading and CTA button
- Height: 60vh on mobile, 80vh on desktop
Features Grid:
- 1 column on mobile
- 2 columns on tablet
- 4 columns on desktop
- Include icon, title, and description
Pricing Section:
- 3 pricing tiers
- Stack vertically on mobile
- Side-by-side on tablet and up
- Highlight middle tier
Testimonials:
- 1 testimonial per row on mobile
- 2 per row on tablet
- 3 per row on desktop
- Include avatar, quote, and author name
Footer:
- Stack columns vertically on mobile
- 4-column layout on desktop
- Include social media icons

Requirements:

Use mobile-first approach
All images must be responsive (img-fluid)
Typography must scale appropriately
Test at all Bootstrap breakpoints
Touch-friendly buttons (adequate size and spacing)

Responsive Design Best Practices:

Always start with mobile layout, then enhance for larger screens
Use img-fluid on all content images
Test early and often on real devices
Prioritize content for mobile - hide secondary elements if needed
Use appropriate breakpoints - don't add unnecessary complexity
Consider touch targets - buttons should be at least 44x44px
Optimize images for different screen densities (1x, 2x, 3x)
Use viewport units (vh, vw) sparingly - they behave differently on mobile
Test form inputs on mobile - ensure they're easy to fill out
Remember: Responsive is not just about screen width - consider connection speed too