Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Mobile-First Approach in Bootstrap 5
What is Mobile-First?
Mobile-first is a design strategy that starts with designing for the smallest screens and then progressively enhances the experience for larger screens.
Traditional Approach
- Design for desktop first
- Then try to fit content on mobile
- Often results in poor mobile experience
- Removing features for mobile
- "Graceful degradation"
Mobile-First Approach
- Design for mobile first
- Then enhance for larger screens
- Focus on core content and functionality
- Adding features for larger screens
- "Progressive enhancement"
Why Mobile-First?
Mobile Traffic
Over 50% of web traffic is mobile
Performance
Faster loading on mobile networks
Content Focus
Forces prioritization of important content
SEO Benefits
Google prioritizes mobile-friendly sites
Bootstrap's Mobile-First Implementation
CSS Media Queries Structure
/* Base styles - Apply to ALL screens (mobile first) */
.container {
padding: 15px;
}
/* Small devices (tablets, 576px and up) */
@media (min-width: 576px) {
.container {
padding: 20px;
}
}
/* Medium devices (desktops, 768px and up) */
@media (min-width: 768px) {
.container {
padding: 30px;
}
}
/* Large devices (large desktops, 992px and up) */
@media (min-width: 992px) {
.container {
padding: 40px;
}
}min-width media queries, meaning styles build upon the mobile base.Grid System - Mobile First
Mobile-First Grid Examples
Example 1: Stack on Mobile, Side-by-Side on Desktop
<div class="row">
<div class="col-md-6">Column 1</div>
<div class="col-md-6">Column 2</div>
</div>How it works: On mobile (xs), columns are col-12 by default (full width, stacked). On medium screens and up (md), they become 50% width each.
Example 2: Progressive Complexity
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-3">Item 1</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">Item 2</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">Item 3</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3">Item 4</div>
</div>| Screen Size | Class | Columns per Row | Layout |
|---|---|---|---|
| Mobile (576px) | col-12 | 1 column | Stacked vertically |
| Small (≥ 576px) | col-sm-6 | 2 columns | 2 per row |
| Medium (≥ 768px) | col-md-4 | 3 columns | 3 per row |
| Large (≥ 992px) | col-lg-3 | 4 columns | 4 per row |
Mobile-First Utilities
Responsive Utility Classes
Spacing Utilities
| Class | Mobile | Tablet+ | Desktop+ |
|---|---|---|---|
my-2 my-md-3 my-lg-4 | 0.5rem margin | 1rem margin | 1.5rem margin |
px-1 px-sm-2 px-md-3 | 0.25rem padding | 0.5rem padding | 1rem padding |
Display Utilities
<!-- Show only on mobile -->
<div class="d-block d-md-none">
Mobile-only content
</div>
<!-- Show only on tablet+ -->
<div class="d-none d-md-block">
Desktop content
</div>Mobile-First Navigation
navbar-expand-lg).Mobile-First Forms
<form>
<!-- Stacked on mobile, side-by-side on desktop -->
<div class="row">
<div class="col-md-6 mb-3">
<input type="text" class="form-control">
</div>
<div class="col-md-6 mb-3">
<input type="text" class="form-control">
</div>
</div>
<!-- Full width on mobile, auto width on desktop -->
<button class="btn btn-primary w-100 w-md-auto">
Submit
</button>
</form>Mobile-First Typography
Responsive Heading
This text gets larger on bigger screens.
<!-- Responsive font sizes -->
<h1 class="display-6 display-md-5 display-lg-4">
Responsive Heading
</h1>
<p class="fs-6 fs-md-5 fs-lg-4">
Responsive text
</p>Best Practices for Mobile-First
1. Content First
Prioritize essential content. Remove non-essential elements for mobile.
2. Touch-Friendly
Ensure buttons and links are at least 44×44px for touch screens.
3. Performance
Optimize images and minimize code for slower mobile networks.
4. Progressive Enhancement
Add features for larger screens, don't remove for mobile.
5. Testing
Test on actual mobile devices, not just emulators.
6. Breakpoint Strategy
Use content to determine breakpoints, not specific devices.
Common Mistakes to Avoid
- Starting with desktop design and trying to cram it into mobile
- Using fixed pixel widths instead of relative units
- Hiding too much content on mobile (use progressive disclosure)
- Forgetting to test on various mobile devices and orientations
- Ignoring touch gestures and mobile interaction patterns
Mobile-First Workflow
Design Mobile
Code Mobile
Test Mobile
Enhance Tablet
Enhance Desktop
Test All
