The team behind the most popular CSS framework Bootstrap has released a new version. As of writing this article, the stable release of Bootstrap 5 is out and available for use. Let us see what these newly introduced features in Bootstrap 5.
What’s New in Bootstrap 5 for Web Developers?
As with any major version change a lot has changed in Bootstrap 5 over Bootstrap 4. Here is the list of major differences you need to keep in mind when updating old projects or starting a new project with Bootstrap 5.
Tooltips and popovers in Bootstrap are powered by Popper.js. In Bootstrap 5, v2 of Popper.js has been adopted which brings small breaking changes:
• Removed offset option from Tooltip/Popover and Dropdown. This can now be achieved using the popperConfig parameter.
• The fallback placement option has become fallback placement.
SVG Icon Library
Bootstrap now offers an SVG library of 1,000+ icons that are easy to integrate in your code. You can add these icons by inline code or SVG sprite. A web font version will also be introduced with the stable release of this icon library. We have been using this icon library in our current projects (including Bootstrap 4) and have found it to be quite extensive.
Browser support – IE 10 and 11 support removed
CSS custom properties
Thanks to dropping support for Internet Explorer, Bootstrap 5 now supports custom CSS properties. In Bootstrap 4 root variables were present for only color and fonts. Bootstrap 5 now offers CSS variables in a handful of components and layout options. For example, the table component makes use of local variables to make striped, hover-able, and active table styles easier.
Expanded color palette
Many CSS frameworks such as Tailwind offer an extensive set of color palettes which has been quite popular with developers. Bootstrap 5 has now expanded its color palette to include more colors that are present in different shades. This allows you to easily customize the look and feel of your app without ever leaving the codebase. You can easily override these colors with your own color palette using the color shades generator.
Updated Form Controls
Bootstrap 5 includes custom-designed form controls. In Bootstrap 4 the form controls were using whatever defaults each browser provided. In Bootstrap 5 the form controls will offer a much more consistent look and feel in all browsers due to its custom design.
A new utility API has been built into Bootstrap 5. You can use Sass to create your own utilities. You can also use the utility API of Bootstrap to modify or remove the default utility classes.
Enhanced grid system
While Bootstrap 5 keeps the grid system structure that was introduced in Bootstrap 4, it enhances it by adding new classes. This would mean less effort will be required to move the grid structure from the older to the newer version.
New off-canvas component
Bootstrap 5 adds support for a brand new accordion component. The new accordion includes Bootstrap Icons as chevron icons indicating state and click-ability. You can also use .accordion-flush to remove the default background color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
Floating labels in Form Inputs
New floating label support has also been added in bootstrap 5. This behavior is similar to the behavior shown by many material design UI frameworks such as MDB. Form validation styles also work as expected with floating labels present.
Easier customization & theming
Bootstrap 5 offers a new Customize section which expands on v4’s theming page with more content and code snippets for building on top of Bootstrap’s source Sass files. An npm starter project is also provided to help you get started with customizing Bootstrap faster. Setting up Bootstrap with Parcel is also now documented.
Note: As of current projects, You will keep using Bootstrap 4 in your existing projects. For new web projects, you will start using Bootstrap 5 right away to make use of the new features introduced.