Bootstrap 5 – An Overview – What’s new and What’s Changed

Bootstrap 5 Overview

Bootstrap 5 is a major modernization of the framework, focusing on performance, customization, and removing legacy dependencies. The biggest shift is the move away from jQuery, alongside a refreshed design system, new utilities, and dropped support for older browsers.

πŸš€ Key New Features in Bootstrap 5

  • Vanilla JavaScript β€” All components rewritten without jQuery, reducing bundle size and improving performance.
  • CSS Custom Properties β€” Extensive use of CSS variables for easier theming and dynamic styling.
  • XXL Breakpoint β€” New xxl grid tier for screens β‰₯1400px.
  • Utilities API β€” Generate or customize utility classes programmatically.
  • Offcanvas Component β€” Slide‑in panels for navigation or UI elements.
  • Bootstrap Icons β€” Official SVG icon library integrated into the ecosystem.
  • Improved Forms β€” Redesigned form controls, floating labels, and consistent cross‑browser styling.
  • Dark Mode Support β€” Easier to implement via CSS variables.

πŸ”§ Major Changes from Bootstrap 4

  • jQuery Removed β€” Components now use a new JS API.
  • IE11 Support Dropped β€” Allows use of modern CSS/JS features.
  • Updated Grid System β€” Adds xxl, updates gutter classes (g-*, gx-*, gy-*).
  • Reworked Utilities β€” More granular spacing, display, flex, and color utilities.
  • Improved Modals & Dropdowns β€” Better accessibility and customization.
  • Sass & CSS Updates β€” Cleaner variable structure and more modular architecture.