Bootstrap 5 Features
Core improvements in Bootstrap 5 that speed up modern UI development.
What changed in Bootstrap 5?
- No jQuery dependency: Components use vanilla JavaScript APIs.
- More utilities: Spacing, display, flex, opacity, and responsive helpers expanded.
- Offcanvas and improved forms: Better mobile navigation and cleaner input styles.
- CSS variables: Easier theme control and runtime style changes.
Feature Comparison Snapshot
| Feature | Bootstrap 4 | Bootstrap 5 |
|---|---|---|
| JavaScript dependency | Requires jQuery | No jQuery required |
| Layout support | Flex utilities | Expanded flex + utility APIs |
| New components | Limited mobile panel patterns | Built-in Offcanvas |
| Theming | Sass-heavy customization | Sass + CSS variables |
Example: Offcanvas Trigger
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#menuPanel">
Open Menu
</button>
<div class="offcanvas offcanvas-start" id="menuPanel">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Quick Menu</h5>
<button class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">Content here...</div>
</div>