It’d be an understatement to say we’re excited for the release of Bootstrap 5.0. Over the last few months, we’ve been working with pre-release versions and we’ve been excited at the major changes to the popular front-end open source toolkit. Here’s a rundown of our favourite new components, revamped components that we think you should know about, and other changes you need to get started with Bootstrap 5.0.
What are Bootstrap 5’s new components?
Bootstrap has some great improvements to existing components – but there are three new components that we’re really excited about.
New offcanvas support
From building an e-commerce front end to developing a new navigation system for a website, there are always use cases where you need to bring in a menu or dialog for the user. Bootstrap 5’s new offcanvas component delivers this through a Javascript toggleable sidebar component. You can set it to appear from the bottom, left, or right of the viewport – giving you multiple levels of flexibility.
Floating labels
Even though your users fill out forms multiple times every day, providing tooltips in form fields is still needed. It respects your user’s time and helps deliver an easy to understand user experience. Bootstrap 5 introduced a new floating label for form fields. We really like how the label shrinks in size as the user navigates the fields and enters data.
Utility classes
Similar to our other favourite tool, Tailwind CSS, Bootstrap 5 supports new extended utility classes. There’s new classes for positioning, opacity, border radius, overflow, and more.
Updated components
Accordion component
Out with the old, in with the new. Bootstrap 5 replaces the old .card component with the new .accordion component. It’s a great improvement with a much smoother animation look and feel.
a captionForms are always custom
Another big revamp is in Bootstrap 5’s forms. In previous versions, your site would use the stock form fields based on the browser the end user was using. You could customize it to use the Bootstrap base CSS form fields or customized ones. Now with Bootstrap 5, your web applications will always use custom based on your CSS instead of the browser’s stock form fields.
The other big improvement with Bootstrap 5 forms is with layout. You don’t need to use things like .form-group, .form-row, or .form-inline anymore. Now you can just place form elements in the grid like any other component.
More Bootstrap 5 improvements
- Bootstrap 5 has removed jQuery and replaced it with vanilla Javascript. This change means Bootstrap 5 is 74% the size of Bootstrap 4!
- Added specificity to data-*. Instead of data-toggle it’s now data-bs-toggle making for less of a chance of conflicts with other packages.
- With any new update, you can always expect some browser support to be dropped. With Bootstrap 5, the following browsers will no longer be supported.
- Dropped Microsoft Edge Legacy
- Dropped Internet Explorer 10 and 11
- Dropped Firefox < 60
- Dropped Safari < 10
- Dropped iOS Safari < 10
- Dropped Chrome < 60
- Dropped Android < 6
What’s next?
It’s always important to test, test, and retest anytime you’re migrating to a new version of a framework. We’re constantly testing new framework and operating system updates for our clients’s mobile and web applications to make sure there are no unexpected issues for their customers.
