Mastering Responsive Design with Bootstrap 5
# 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:
```css
/* 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
| Breakpoint | Class infix | Dimensions |
|------------|-------------|------------|
| X-Small | None | <576px |
| Small | sm | ≥576px |
| Medium | md | ≥768px |
| Large | lg | ≥992px |
| X-Large | xl | ≥1200px |
| XX-Large | xxl | ≥1400px |
## Responsive Containers
```html
<!-- 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
```html
<!-- 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
```css
/* 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
```html
<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
```html
<!-- 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
```html
<!-- 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
```html
<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
```html
<!-- 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
```css
: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
```css
/* 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
```html
<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
```html
<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!