Table of Contents
Bootstrap 5: The Ultimate Guide with Examples & Comparisons
Bootstrap 5 is the latest major release of the world’s most popular CSS framework. It’s faster, more intuitive, and packed with new features. Let’s dive into what’s new, how it compares to older versions, and practical examples to get you started.
Written by Deepak Dubey • GitHub
What Is Bootstrap 5?
Bootstrap 5 is the latest version of the world’s most popular CSS framework. It’s designed to help developers build responsive, mobile-first websites quickly and efficiently. Key features include:
- No dependency on jQuery
- Improved grid system
- New utility classes
- Enhanced customization options
- Better performance and smaller file size
Why Upgrade to Bootstrap 5?
Bootstrap 5 offers significant improvements over previous versions:
- No jQuery: Uses vanilla JavaScript for better performance.
- Improved Grid System: More intuitive and flexible.
- New Utility Classes: Additional helpers for spacing, shadows, and more.
- Enhanced Customization: Easier theming with CSS variables.
- Better Documentation: Clearer examples and guides.
Bootstrap 4 vs. Bootstrap 5: Key Differences
1. jQuery Dependency
Bootstrap 4 relied on jQuery for JavaScript components. Bootstrap 5 drops jQuery entirely, using vanilla JavaScript for better performance and smaller bundle sizes.
// Bootstrap 4: Required jQuery
$('button').click(function() {
alert('Button clicked!');
});
// Bootstrap 5: Vanilla JavaScript
document.querySelector('button').addEventListener('click', () => {
alert('Button clicked!');
});
2. Grid System
Bootstrap 5 introduces a new grid system with improved gutters, container classes, and responsive behavior.
<!-- Bootstrap 4 Grid -->
<div class="container">
<div class="row">
<div class="col-md-6">Column 1</div>
<div class="col-md-6">Column 2</div>
</div>
</div>
<!-- Bootstrap 5 Grid -->
<div class="container">
<div class="row g-3"> <!-- New gutter class -->
<div class="col-md-6">Column 1</div>
<div class="col-md-6">Column 2</div>
</div>
</div>
3. Utility Classes
Bootstrap 5 adds new utility classes for shadows, spacing, and more. It also introduces CSS variables for easier customization.
<!-- Bootstrap 5: New utility classes -->
<div class="shadow-lg p-3 mb-5 bg-body rounded">Content</div>
<!-- Bootstrap 5: CSS Variables -->
:root {
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
}
4. Forms and Inputs
Bootstrap 5 simplifies form controls with improved styling and new customization options.
<!-- Bootstrap 5 Form -->
<form>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="name@example.com">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
New Features in Bootstrap 5
1. Offcanvas Component
Bootstrap 5 introduces the offcanvas component, which is a sidebar that can be toggled to appear from the edge of the screen.
<!-- Offcanvas Example -->
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">
Toggle Offcanvas
</button>
<div class="offcanvas offcanvas-start" id="offcanvasExample">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Offcanvas Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
<p>Offcanvas content goes here.</p>
</div>
</div>
2. Accordion Component
The accordion component allows you to create collapsible content panels.
<!-- Accordion Example -->
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
Content for accordion item #1.
</div>
</div>
</div>
</div>
3. CSS Custom Properties
Bootstrap 5 uses CSS custom properties (variables) for easier theming and customization.
:root {
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-success: #198754;
}
.btn-primary {
background-color: var(--bs-primary);
}
Getting Started with Bootstrap 5
To start using Bootstrap 5, include it in your project via CDN or npm:
<!-- Bootstrap 5 via CDN --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <!-- Bootstrap 5 via npm --> npm install bootstrap@5.3.0
Once included, you can start using Bootstrap 5 classes in your HTML.
Common Mistakes with Bootstrap 5
- Not updating class names from Bootstrap 4 (e.g.,
form-rowis nowrow). - Forgetting to include the JavaScript bundle for interactive components.
- Overriding Bootstrap styles without using CSS variables.
- Ignoring the new grid system and gutter classes.
- Not testing responsive behavior on mobile devices.
Final Thoughts
Bootstrap 5 is a powerful upgrade that simplifies frontend development with its improved grid system, new components, and jQuery-free approach. Whether you're building a simple website or a complex web application, Bootstrap 5 provides the tools you need to create responsive, modern designs quickly.
If you're still using Bootstrap 4, now is the time to upgrade and take advantage of the new features and performance improvements.
Connect with me on LinkedIn and check out my GitHub for more frontend tips and projects!