Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Bootstrap 5 Responsive Design
Responsive Web Design (RWD) makes your web pages look good on all devices.
What is Responsive Design?
Responsive web design uses CSS and HTML to resize, hide, shrink, enlarge, or move content to make it look good on any screen.
Key Principles
📱
Fluid Grids
Elements sized in relative units (%, em, rem) instead of fixed pixels.
🖼️
Flexible Images
Images that scale within their containing elements.
🎯
Media Queries
CSS rules that apply different styles based on device characteristics.
Viewport Meta Tag
The most important tag for responsive design:
Viewport Configuration
<meta name="viewport" content="width=device-width, initial-scale=1">Viewport Attributes:
| Attribute | Value | Description |
|---|---|---|
width | device-width | Sets width to device's screen width |
initial-scale | 1 | Sets initial zoom level |
minimum-scale | 0.5 | Minimum zoom level allowed |
maximum-scale | 2 | Maximum zoom level allowed |
user-scalable | yes/no | Whether user can zoom |
Bootstrap Breakpoints
Bootstrap uses six default breakpoints for building responsive layouts.
Breakpoint System
| Breakpoint | Class Prefix | Dimensions | Devices |
|---|---|---|---|
| Extra small | xs (default) | <576px | Phones |
| Small | sm | ≥576px | Large phones |
| Medium | md | ≥768px | Tablets |
| Large | lg | ≥992px | Laptops |
| Extra large | xl | ≥1200px | Desktops |
| Extra extra large | xxl | ≥1400px | Large desktops |
Note: Bootstrap uses a mobile-first approach. Styles for mobile apply first, then larger breakpoints override as needed.
Responsive Grid Examples
Basic Responsive Grid
Column 1
Column 2
Column 3
Column 4
Responsive Grid Code
<div class="container">
<div class="row">
<div class="col-md-4">Column 1 (33%)</div>
<div class="col-md-4">Column 2 (33%)</div>
<div class="col-md-4">Column 3 (33%)</div>
</div>
</div>Breakdown:
col-12- Full width on extra small devices (phones)col-md-6- 50% width on medium devices (tablets)col-lg-3- 25% width on large devices (desktops)
Responsive Utilities
Bootstrap provides utility classes for responsive behavior.
Display Utilities
| Class | Effect |
|---|---|
d-none | Hide element |
d-block | Display as block |
d-md-none | Hide on medium+ screens |
d-lg-block | Show as block on large+ |
Visible only on mobile
Visible only on tablet+
Spacing Utilities
| Class | Breakpoint |
|---|---|
mt-3 | Margin top on all screens |
mt-md-4 | Margin top on medium+ |
px-lg-5 | Padding x on large+ |
py-sm-2 | Padding y on small+ |
Padding increases on larger screens
Responsive Images
Image Responsive Classes
Basic Responsive Image
<img src="image.jpg"
class="img-fluid"
alt="Responsive image">.img-fluid - Scales with parent
Responsive Thumbnail
<img src="image.jpg"
class="img-thumbnail"
alt="Thumbnail">.img-thumbnail - Bordered image
Responsive Tables
| # | First Name | Last Name | Username | Phone | Address | |
|---|---|---|---|---|---|---|
| 1 | John | Doe | @johndoe | john@example.com | (123) 456-7890 | 123 Main St |
<div class="table-responsive">
<table class="table">
<!-- table content -->
</table>
</div>Tip: Always wrap wide tables in
.table-responsive for horizontal scrolling on small screens.Responsive Navbar
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<!-- Toggler for mobile -->
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarNav">
<!-- Navigation items -->
</div>
</div>
</nav>The
navbar-expand-lg class means navbar collapses to hamburger menu on screens smaller than large (lg) breakpoint.Testing Responsiveness
Browser DevTools
Use device toolbar in Chrome/Firefox to test different screen sizes.
F12 → Toggle Device Toolbar
Real Devices
Test on actual smartphones and tablets.
Physical testing is essential
Online Tools
Use tools like BrowserStack, Responsinator.
BrowserStack.com
Best Practices for Responsive Design
- Always use the viewport meta tag
- Design mobile-first
- Use relative units (rem, em, %) instead of px
- Test on multiple devices and screen sizes
- Keep touch targets at least 44×44 pixels for mobile
- Use responsive images with srcset attribute
