Bootstrap 5
Bootstrap 5 is a major rewrite that removed jQuery, modernized utility naming, and added new components. This lesson highlights the changes that matter most when learning or migrating.
Bootstrap 5 Overview
Bootstrap 5 replaced jQuery-dependent JavaScript with vanilla ES modules, dropped support for Internet Explorer, and switched from em to rem units throughout the source. It also renamed directional utilities to use logical properties like start and end instead of left and right.
New in Bootstrap 5 are components such as Offcanvas, floating form labels, and an extra xxl breakpoint, along with expanded utility APIs that let you generate custom classes for spacing, color, and more directly from Sass maps.
| Concept | Description | Common Usage |
| No jQuery | All plugins rewritten in vanilla JavaScript | Smaller bundles, no jQuery dependency required |
| Logical properties | ms-/me- replace ml-/mr- for margin/padding | RTL-friendly spacing utilities |
| xxl breakpoint | New breakpoint at 1400px and up | Extra-large desktop layouts |
| Offcanvas component | Slide-in panel for navigation or filters | Mobile menus, sidebars, cart drawers |
| Utility API | Sass-based system for generating custom utilities | Adding your own spacing/color utility classes |
Bootstrap 5 Example
<!-- Bootstrap 4 -->
<div class="ml-3 mr-2 text-left">Old direction classes</div>
<!-- Bootstrap 5 -->
<div class="ms-3 me-2 text-start">New logical-property classes</div>
<!-- New in Bootstrap 5: floating labels -->
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingEmail" placeholder="name@example.com">
<label for="floatingEmail">Email address</label>
</div>
Bootstrap 5 renamed ml-/mr- to ms-/me- (start/end) and text-left/text-right to text-start/text-end so classes automatically adapt to right-to-left languages. Floating labels, shown here, are a new form pattern introduced in this version.
Top 10 Bootstrap 5 Examples
These are the most important class and API changes to know when working in Bootstrap 5.
| # | Example | Syntax |
| 1 | Margin start (was ml-) | <div class="ms-3">...</div> |
| 2 | Margin end (was mr-) | <div class="me-3">...</div> |
| 3 | Text align start (was text-left) | <p class="text-start">...</p> |
| 4 | Float end (was float-right) | <div class="float-end">...</div> |
| 5 | New xxl grid column | <div class="col-xxl-3">...</div> |
| 6 | Floating form label | <div class="form-floating">...</div> |
| 7 | Offcanvas panel | <div class="offcanvas offcanvas-start" id="myOffcanvas">...</div> |
| 8 | Rounded utility scale | <div class="rounded-3">...</div> |
| 9 | Gap utility for flex/grid | <div class="d-flex gap-3">...</div> |
| 10 | Vanilla JS plugin init | new bootstrap.Modal(document.getElementById('myModal')); |
Popular Real-World Bootstrap 5 Examples
These migration and adoption patterns come up constantly when teams move to or start fresh with Bootstrap 5.
| Scenario | Pattern |
| Migrating spacing utilities | ml-3 mr-2 → ms-3 me-2 |
| Migrating text alignment | text-left → text-start, text-right → text-end |
| Removing jQuery from a legacy project | new bootstrap.Tooltip(el); // no $(el).tooltip() needed |
| Adding an extra-large layout tier | <div class="col-lg-6 col-xxl-4">...</div> |
| Building a mobile filter drawer | <div class="offcanvas offcanvas-end">Filters</div> |
| Modern login form | <div class="form-floating"><input class="form-control"><label>Email</label></div> |
| RTL language support | <html dir="rtl"> <link href="bootstrap.rtl.min.css"> |
| Custom utility class generation | $utilities: map-merge($utilities, ("cursor": (property: cursor, values: pointer grab))); |
Best Practices
- Search-and-replace old directional classes (ml-, mr-, text-left, text-right) when migrating.
- Drop any jQuery plugin initialization code and use the native bootstrap.* JavaScript API.
- Take advantage of the new xxl breakpoint for very large desktop layouts.
- Use gap utilities instead of manual margins for spacing items inside flex or grid containers.
- Adopt floating labels for cleaner, modern-looking forms.
- Check the official migration guide before upgrading an existing Bootstrap 4 project.
- Test RTL support early if you plan to localize into Arabic, Hebrew, or similar languages.
Common Mistakes
- Copying Bootstrap 4 snippets from old tutorials without renaming direction-based classes.
- Leaving jQuery script tags in the page when the project no longer needs them.
- Assuming Internet Explorer is still supported, which it is not in Bootstrap 5.
- Not updating data-toggle to data-bs-toggle when migrating interactive components.
- Forgetting that units in the Sass source shifted from em to rem, which can affect custom overrides.
- Overlooking the new gap utility and still hand-writing margin combinations for flex layouts.
Key Takeaways
- Bootstrap 5 removed jQuery and rewrote plugins in vanilla JavaScript.
- Directional classes now use logical start/end naming for RTL support.
- A new xxl breakpoint was added for extra-large screens.
- Offcanvas and floating labels are notable new components introduced in v5.
- All data attributes for JS plugins are now prefixed with data-bs-.
Pro Tip
When migrating an older project, run a search for data-toggle, data-target, ml-, mr-, text-left, and text-right first; renaming those covers most of the breaking changes.