What is New in Bootstrap 5.0
Bootstrap 5.0 is a major update that removes the jQuery dependency, switches to vanilla JavaScript, and introduces many modern improvements. It drops support for older browsers like Internet Explorer, adds new utilities and components, enhances the grid system, and includes right-to-left (RTL) support. These changes make the framework lighter, faster, and more flexible for current web development.
No More jQuery Dependency
Bootstrap now uses plain JavaScript for all plugins. This reduces file size and eliminates the need for jQuery. Popper is still required for positioning in dropdowns, tooltips, and popovers.
You can include the bundle that has Popper built-in:
<script src="bootstrap.bundle.min.js"></script>Browser Support Changes
Internet Explorer 10 and 11 are no longer supported. Other dropped browsers include older versions of Edge, Firefox, Safari, and Chrome. This allows Bootstrap to use modern CSS and JavaScript features.
Grid and Layout Updates
A new XXL breakpoint was added for screens wider than 1400px.
Gutters are now smaller and use rem units. New classes control gutters:
.g-*,.gx-*,.gy-*for horizontal and vertical spacing..g-0replaces the old.no-gutters.
Columns no longer have position: relative by default.
New Components
- Accordion: A dedicated component for collapsible sections.
- Offcanvas: A sidebar that slides in from the edge, great for navigation on mobile.
- Floating labels for forms are now fully supported.
Utilities Enhancements
Many new and renamed utilities make layouts easier:
.d-gridfor CSS Grid containers.- New gap utilities like
.gap-*. - Position utilities for top, bottom, start, and end.
- Translate middle helpers:
.translate-middle-xand.translate-middle-y. - Font size (
.fs-*) and line height utilities. - Overflow options like
.overflow-visibleand.overflow-scroll. - Updated border radius:
.rounded-0to.rounded-3.
Directional utilities now use logical properties (start/end) for better RTL support.
Forms Overhaul
Custom form controls are simplified and unified:
.form-checkfor checkboxes and radios..form-selectfor custom selects..form-rangefor sliders.- Input groups no longer need prepend/append wrappers.
.form-group and .form-row are removed; use grid and spacing utilities instead.
Component Changes
- Jumbotron is removed; build it with utilities.
- Card decks and columns are dropped; use grid or Masonry.
- Badges use
.bg-*classes instead of.badge-*. - Close button is now
.btn-close. - Dropdowns have a dark variant and better options.
- Navbar requires a container inside.
- Toasts and popovers have improved positioning and styling.
Sass and Customization
Switched to Dart Sass. Many mixins and variables are renamed or updated. Responsive font sizes (RFS) are enabled by default. Color system has more shades and better contrast.
RTL Support
Full right-to-left language support is added. Utilities and components automatically flip for RTL layouts.
Removed Features
| Feature | Reason/Alternative |
|---|---|
| jQuery | Replaced with vanilla JS |
| Internet Explorer support | Focus on modern browsers |
| Jumbotron | Use utilities |
| Card decks/columns | Use grid |
.form-group and .form-inline |
Use flex and grid utilities |
| Some mixins (hover, float, etc.) | Simplified or removed |
Migration Tips
Update data attributes to use data-bs- prefix. Replace old classes with new equivalents. Test thoroughly, especially forms, grid, and JavaScript components. Remove jQuery from your project and include Popper if needed.
Final Thoughts
Bootstrap 5.0 modernizes the framework by dropping legacy support and adding powerful new tools. It is lighter, more customizable, and ready for today's web standards. Developers can build responsive sites faster with improved utilities and components.