Mastering Responsive Design with Bootstrap 5

Responsive design is non-negotiable in 2025. Here's how we ensure DjangoZen looks great on every device.

Mobile-First Philosophy

Always design for mobile first, then enhance for larger screens:

/* Mobile base styles */
.product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* Tablet */
@media (min-width: 768px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
}

/* Large desktop */
@media (min-width: 1280px) {
    .product-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

Bootstrap 5 Breakpoints

Responsive Containers

<!-- Full width on mobile, contained on larger screens -->
<div class="container-fluid px-3 px-lg-5">
    <div class="container">
        <!-- Content -->
    </div>
</div>

Flexible Grid Layouts

<!-- Product listing -->
<div class="row g-3 g-md-4">
    {% for product in products %}
    <div class="col-6 col-md-4 col-lg-3">
        <div class="card h-100">
            <!-- Product card content -->
        </div>
    </div>
    {% endfor %}
</div>

Responsive Typography

/* Fluid typography */
h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

p {
    font-size: clamp(0.9rem, 2vw, 1rem);
}

/* Or use Bootstrap utilities */
.display-responsive {
    font-size: 1.5rem;
}

@media (min-width: 768px) {
    .display-responsive {
        font-size: 2.5rem;
    }
}

@media (min-width: 1200px) {
    .display-responsive {
        font-size: 3.5rem;
    }
}

Responsive Navigation

<nav class="navbar navbar-expand-lg">
    <div class="container">
        <a class="navbar-brand" href="/">DJZ</a>

        <!-- Mobile toggle -->
        <button class="navbar-toggler" type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/">Home</a>
                </li>
                <!-- More items -->
            </ul>

            <!-- Right side - stack on mobile -->
            <ul class="navbar-nav ms-auto align-items-lg-center gap-1">
                <!-- Icons only on desktop -->
                <li class="nav-item d-none d-lg-block">
                    <a class="nav-link" href="/wishlist/">
                        <i class="fas fa-heart"></i>
                    </a>
                </li>
                <!-- Full text on mobile -->
                <li class="nav-item d-lg-none">
                    <a class="nav-link" href="/wishlist/">
                        <i class="fas fa-heart me-2"></i>Wishlist
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Hide/Show Elements

<!-- Show on mobile only -->
<div class="d-block d-md-none">
    Mobile menu
</div>

<!-- Hide on mobile -->
<div class="d-none d-md-block">
    Desktop sidebar
</div>

<!-- Show from tablet up -->
<span class="d-none d-sm-inline">
    Extended button text
</span>

Responsive Images

<!-- Responsive image -->
<img src="product.jpg"
     class="img-fluid"
     alt="Product">

<!-- Different sizes for different screens -->
<picture>
    <source media="(min-width: 1200px)" srcset="product-large.jpg">
    <source media="(min-width: 768px)" srcset="product-medium.jpg">
    <img src="product-small.jpg" alt="Product" class="img-fluid">
</picture>

<!-- Lazy loading -->
<img src="placeholder.jpg"
     data-src="product.jpg"
     loading="lazy"
     class="img-fluid lazyload"
     alt="Product">

Responsive Tables

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>Order</th>
                <th class="d-none d-md-table-cell">Date</th>
                <th>Total</th>
                <th class="d-none d-lg-table-cell">Status</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <!-- Rows -->
        </tbody>
    </table>
</div>

Responsive Spacing

<!-- Padding that increases on larger screens -->
<section class="py-4 py-md-5 py-lg-6">
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-8 mb-4 mb-lg-0">
                <!-- Main content -->
            </div>
            <div class="col-12 col-lg-4">
                <!-- Sidebar -->
            </div>
        </div>
    </div>
</section>

CSS Custom Properties for Responsiveness

:root {
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --container-padding: 1rem;
}

@media (min-width: 768px) {
    :root {
        --spacing-sm: 1.5rem;
        --spacing-md: 2rem;
        --spacing-lg: 3rem;
        --container-padding: 2rem;
    }
}

@media (min-width: 1200px) {
    :root {
        --spacing-sm: 2rem;
        --spacing-md: 3rem;
        --spacing-lg: 4rem;
        --container-padding: 3rem;
    }
}

.section {
    padding: var(--spacing-lg) var(--container-padding);
}

Touch-Friendly Design

/* Larger touch targets on mobile */
.btn {
    min-height: 44px;
    min-width: 44px;
}

@media (pointer: coarse) {
    /* Touch device */
    .nav-link {
        padding: 0.75rem 1rem;
    }

    .dropdown-item {
        padding: 0.75rem 1.5rem;
    }
}

Testing Responsive Design

1. Browser DevTools: Chrome/Firefox responsive mode
2. Real devices: Test on actual phones and tablets
3. Orientation: Test portrait and landscape
4. Touch interactions: Hover states, tap targets

Common Patterns

Responsive Card Grid

<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4 g-3 g-lg-4">
    {% for item in items %}
    <div class="col">
        <div class="card h-100">
            <!-- Card content -->
        </div>
    </div>
    {% endfor %}
</div>

Responsive Hero

<section class="hero py-5 py-lg-6">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-12 col-lg-6 text-center text-lg-start mb-4 mb-lg-0">
                <h1 class="display-4 display-lg-3 fw-bold mb-3">
                    Welcome to DjangoZen
                </h1>
                <p class="lead mb-4 d-none d-md-block">
                    Extended description for larger screens
                </p>
                <a href="/products/" class="btn btn-primary btn-lg">
                    <i class="fas fa-shopping-bag me-2 d-none d-sm-inline"></i>
                    Browse Products
                </a>
            </div>
            <div class="col-12 col-lg-6">
                <img src="hero.jpg" class="img-fluid rounded-3" alt="Hero">
            </div>
        </div>
    </div>
</section>

Responsive design ensures everyone has a great experience, regardless of device!