Powerful front-end framework upgraded: what’s new in Bootstrap 5

We are happy to announce that new opportunities are coming in responsive front-end web development. The most popular front-end framework — Bootstrap — was released on May 5, 2021, in a new version with a bunch of powerful improvements. In this post, our development team is exploring what’s new in Bootstrap 5 and how it can help us create even more visually appealing and feature-rich mobile-first interfaces in less time.

Bootstrap: the best front-end toolkit

Bootstrap is a free and open-source CSS, JavaScript, and HTML framework for building responsive, mobile-first websites. It scales websites and apps from mobile phones to tablets to desktops using CSS media queries. The framework is full of powerful features and very well documented. It makes it faster and easier for front-end developers of all levels to build web pages that look great on any kind of device.

Indeed, Bootstrap contains everything for more efficient development — Sass variables, robust JS plugins, responsive grid system, and more. Among the features loved most by developers are ready-made, reusable, and highly customizable design templates, also known as components, to compose websites with. These may be dropdowns, accordions, progress bars, alerts, buttons, button groups, responsive embeds, cards, badges, breadcrumbs, carousels, and so many more.

The framework also offers its own library of SVG icons designed to work in the best ways together with Bootstrap components.

There also are Bootstrap themes that work as component-based frameworks giving developers even more opportunities in building anything. All of these themes are reviewed by the framework’s creators for matching its guidelines.

Key new features in Bootstrap 5

According to the official release notes, the framework’s new version has taken three alpha releases, three beta releases, and several months of hard work of the maintainers and the community to finally be released. Sounds impressive, so let’s start uncovering what's changed in Bootstrap 5.

Drop for jQuery support

One of the biggest news about Bootstrap 5 is that the team has decided to stop supporting the jQuery library and use regular JavaScript instead. The end of jQuery support is meant to reduce the source file size and improve loading times, as well as make V5 more future-ready. Developers will no longer have to download the entire huge library to do things in JS.

jQuery has been used in Bootstrap for 8 years providing developers with unprecedented capabilities in JavaScript-based functionalities and simplifying plenty of tasks. However, it has been losing its popularity lately. JavaScript frameworks such as Angular, React, and Vue, have come to the forefront. They are using virtual DOM instead of DOM directly, which increases website performance.

Enhanced JavaScript

While removing jQuery, the Bootstrap 5 creators are making great improvements to the project’s JavaScript. These new features include an update to Popper 2, revamped dropdown, popover, and tooltip placement, the new ability for all plugins to accept a CSS selector as 1st argument, optimizations for easier code sharing across components, and much more.

CSS custom properties

Special attention needs to be paid to the introduction of custom CSS properties in Bootstrap 5, which has become possible due to the end of support for Internet Explorer. V5’s predecessor, version 4, had custom CSS properties represented as a limited set of root variables only for color and fonts. V5 ships with CSS variables in a number of various components and layout options as well.

Custom properties are meant to make your Cascading Style Sheets more flexible and customizable. To avoid conflict with third-party CSS, the variables now have a -bs prefix.

Improvements to forms

Another new feature in Bootstrap 5 is that its team has revamped the system of form controls and dedicated a prominent section to them in the documentation. The previous version allowed for using custom form controls (radio buttons, checkboxes, switches, etc.), but they relied on each specific browser’s defaults. In V5, forms are entirely custom, so developers can provide the same look and feel across all browsers. It makes forms easier to work with and more uniform across various browsers.

Improvements to Bootstrap 5 forms also include a simplified form layout, the new form file made completely in CSS, and the support for floating labels for text input, text areas, and selects.

RTL support

Bootstrap 5 has finally introduced RTL support for languages that read from right to left. This includes RTL versions for the CSS dist file, complete documentation, and examples. To provide RTL support, the V5 team has been relying on the RTLCSS framework for converting LTR Cascading Style Sheets to RTL. The RTL support is a huge accessibility improvement in Bootstrap 5 that eliminates the need for extra hard work that developers had to do when needed RTL on their websites.

Grid and layout system improvements

The next bunch of new features in Bootstrap 5 are the improvements to the grid and layout system that have been made with the aim of streamlining and improving the functionalities. It’s now possible to use column classes as width utilities — in V5, padding is not applied outside a .row. Bootstrap 5 also has new gutter utilities for customizing grid gutters. The default class for columns is no longer “relative.” In addition, the .media component for utilities has been dropped.

Great changes in utilities

The Bootstrap team has added new utilities to the framework. They are related to positioning, grid layouts, font size, font weight, border radius, and more. There is also now a brand-new utility API for extending the default utility classes. It makes utilities easy to generate and customize.

As part of RTL support, Bootstrap 5 has logical properties for spacing utilities. For this purpose, several variables and classes have been renamed. The concept of logical properties was partly implemented in V4 and might be known to many developers thanks to so-called flex utilities. They replace direction-based properties (start and end instead of left and right).

Well-documented and improved customizing options

It is now easier than ever before to theme, customize, and extend Bootstrap. The Bootstrap 5 team has added a customization section to documentation that makes things clearer and removes possible ambiguities. It has explanations, ready-to-go code snippets, and a starter npm project to get developers covered. It explains how to use the source Sass files (with their variables, maps, functions, and mixins), reusable components, a new extended color palette with improved contrasts and better accessibility, and more.

New offcanvas component

Among the new features of Bootstrap 5 is also the new offcanvas component that includes a configurable backdrop, body scroll, and placement. The new element includes Bootstrap chevron icons to show the clickability and state. Developers can position this type of component at the top, bottom, left, or right of the viewport.

New accordion component

There is also a new accordion component in Bootstrap 5 to replace the .card accordion component. The new one is easier to work with because it uses custom HTML and CSS to support the Collapse JavaScript plugin.

Updated logo

One of the small but nice improvements in Bootstrap 5 is its new logo with elements resembling CSS’s curly braces, as well as the well-known B icon. The design of the documentation section has been changed accordingly.

Build your outstanding responsive web pages!

The new features in Bootstrap 5 just prove one more time that it has everything for the fast and efficient development of web pages that provide the best user experiences across devices. However, even the best-documented component-based framework works much better in experienced hands — so you are welcome to reach out to our development team at any moment. Let’s stay in touch!