Bootstrap 5.x (LTS): What's New, Release History & Support Lifecycle

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-0 replaces 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-grid for CSS Grid containers.
• New gap utilities like .gap-*.
• Position utilities for top, bottom, start, and end.
• Translate middle helpers: .translate-middle-x and .translate-middle-y.
• Font size (.fs-*) and line height utilities.
• Overflow options like .overflow-visible and .overflow-scroll.
• Updated border radius: .rounded-0 to .rounded-3.

Directional utilities now use logical properties (start/end) for better RTL support.

Forms Overhaul

Custom form controls are simplified and unified:

• .form-check for checkboxes and radios.
• .form-select for custom selects.
• .form-range for 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

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.