Bootstrap 5: What’s New and How to Upgrade
Bootstrap is one of the most popular frameworks for building responsive and mobile-friendly websites using HTML, CSS and JavaScript. It provides a set of ready-made components, utilities and templates that can help you create beautiful and functional web pages quickly and easily.
In May 2021, Bootstrap released its fifth major version, bringing tons of changes and improvements, including new components, new classes, new styling for old components, updated browser support, the removal of some old components, and much more.
In this blog post, you will learn what’s new in Bootstrap 5, what has been dropped, and how to upgrade from Bootstrap 4 to Bootstrap 5.
What’s New in Bootstrap 5
Bootstrap 5 brings core changes to Bootstrap as a library, with a change in required dependencies, browser support and more. It also brings changes to the components and classes that we’ve always used in previous versions.
Here are some of the main new features and changes in Bootstrap 5:
- Removal of jQuery: Bootstrap 5 has dropped jQuery as a dependency and switched to vanilla JavaScript. This means that Bootstrap is now lighter and faster, and you don’t need to include jQuery in your projects anymore. You can still use jQuery plugins if you want, but you will need to initialize them manually.
- A custom SVG icon library: Bootstrap 5 has introduced a new icon library with over 1,300 icons that you can use in your projects. The icons are SVG-based, meaning they are scalable and customizable with CSS. You can browse the icons on the official website and use them by copying the SVG code or using the icon font.
- Navbar optimizations: Bootstrap 5 has improved the navbar component with better responsiveness, alignment options, color schemes and offcanvas support. You can now use flexbox utilities to align navbar items horizontally or vertically, use color modes to switch between light and dark themes, and use the offcanvas component to create a sliding sidebar menu.
- Better grid system: Bootstrap 5 has enhanced the grid system with new container classes, columns classes and gutter classes. You can now use .container-xxl for extra large screens, .col-xxl for extra large columns, and .gx-* and .gy-* for horizontal and vertical gutters respectively. You can also use CSS variables to customize the grid breakpoints and gutter sizes.
- Responsive font sizes: Bootstrap 5 has enabled responsive font sizes by default, meaning that the font size will automatically adjust based on the screen size. This makes your typography more accessible and consistent across devices. You can customize the responsive font sizes with Sass variables or disable them if you prefer fixed font sizes.
- RTL support: Bootstrap 5 has added RTL (right-to-left) support for languages like Arabic and Hebrew. You can now use RTL versions of Bootstrap’s CSS files or use the RTL Sass mixin to flip the direction of your layout and components.
These are just some of the highlights of what’s new in Bootstrap 5. You can also explore other new features like the accordion component, the floating labels feature, the color modes feature, the new utilities API and more on the official documentation.
Building a Static E-commerce Site with Next.js, Shopify, and Stripe: A Step-by-Step Guide
What’s Dropped in Bootstrap 5
Along with adding new features and improvements, Bootstrap 5 has also removed some features and components that were either outdated, redundant or incompatible with the new version.
Here are some of the main features and components that have been dropped in Bootstrap 5:
- Support for Internet Explorer: Bootstrap 5 has dropped support for Internet Explorer 10 and 11, as they are no longer widely used or maintained by Microsoft. This means that Bootstrap 5 will not work properly on these browsers and you will need to use a modern browser like Edge, Chrome or Firefox instead.
- Card decks: Bootstrap 5 has removed the card deck component, which was used to create equal height cards in a grid layout. You can now use the grid system or flexbox utilities to achieve the same result with more flexibility and control.
- Custom form controls: Bootstrap 5 has removed the custom form controls for checkboxes, radios, switches, files and ranges. These were used to create consistent cross-browser styles for these form elements. You can now use the native form controls or use CSS variables to customize their appearance.
- Jumbotron: Bootstrap 5 has removed the jumbotron component, which was used to create a large hero area with a headline and a call-to-action button. You can now use the utility classes or custom CSS to create a similar effect.
These are just some of the features and components that have been dropped in Bootstrap 5. You can also check out other deprecated features like badge pills, spinner borders, toast headers and more on the official migration guide.
How to Upgrade from Bootstrap 4 to 5
If you have an existing project that uses Bootstrap 4 and you want to upgrade it to Bootstrap 5, you will need to follow some steps to make sure everything works as expected.
Here are some general steps to upgrade from Bootstrap 4 to 5:
- Replace your Bootstrap 4 CSS and JS files with the latest Bootstrap 5 files. You can download them from the official website or use a CDN link.
- Remove jQuery from your project if you don’t need it anymore. If you still need it for other plugins or scripts, make sure you initialize them manually after loading Bootstrap’s JS file.
- Replace any data-* attributes with data-bs-* attributes in components that require JavaScript functionality like modals, tooltips, popovers etc.
- Replace any card deck classes with grid or flexbox classes if you used them in your layout.
- Replace any custom form control classes with native form control classes or CSS variables if you used them in your forms.
- Replace any jumbotron classes with utility classes or custom CSS if you used them in your pages.
- Check your navbar component for any changes in responsiveness, alignment options, color schemes or offcanvas support. Adjust your markup or styles accordingly if needed.
- Check your grid system for any changes in container classes, column classes or gutter classes. Adjust your markup or styles accordingly if needed.
- Check your typography for any changes in responsive font sizes or RTL support. Adjust your markup or styles accordingly if needed.
These are just some general steps to upgrade from Bootstrap 4 to 5. You may also need to check other components or features that have been changed or removed in Bootstrap 5. You can refer to the official migration guide for more details.
Conclusion
Bootstrap 5 is a major update that brings many new features and improvements to the popular framework. It also removes some old features and components that are no longer relevant or compatible with the new version.
