Bootstrap is one of the most popular CSS libraries. It allows developers to easily use beautiful styles and components and create responsive websites. Using Bootstrap can save developers time, especially with components that are used in almost every project.
What’s Changed
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.
jQuery no longer a dependency
As a major change from the previous versions, jQuery is no longer a dependency of Bootstrap. Now, you can use Bootstrap in its full glory without it, but you still need Popper.js. This change makes it easier to use Bootstrap in projects that don’t require or use jQuery — such as when using Bootstrap with React.
You can still use jQuery with Bootstrap if it’s a part of your website. If Bootstrap detects jQuery in the window object, it will automatically add all components to jQuery’s plugin system. So, if you’re migrating from v4 to v5, you don’t need to worry about this change, and you can still use jQuery with Bootstrap as necessary.
But what if you use jQuery in your website, but you don’t want Bootstrap to use jQuery? You can do that by adding the attribute data-bs-no-jquery to the body element of the document:
<body data-bs-no-jquery=”true”>
</body>
How does Bootstrap work without jQuery? For example, in v4 you would use the following code in JavaScript to create a Toast element:
$(‘.toast’).toast()
In Bootstrap 5, you can use that same code to create a Toast element if your website already uses jQuery. Without jQuery, you’ll need to use something like the following code to create a Toast element:
const toastElList = […document.querySelectorAll(‘.toast’)]
const toastList = toastElList.map((toastEl) => {
return new bootstrap.Toast(toastEl)
})
This just uses Vanilla JavaScript to query the document for elements having a .toast class, then initializes a Toast component on the element using new bootstrap.Toast().
Browser support change
Up until v4, Bootstrap used to support Internet Explorer (IE) 10 and 11. As of Bootstrap 5, support for IE has been fully dropped. So, if you need to support IE in your website, you probably should be careful when migrating to v5.
Other changes in browser support include:
- Firefox and Chrome support now starting from version 60
- Safari and iOS support now starting from version 12
- Android Browser and WebView support now starting from version 6
Bugs fixed
In Bootstrap 4’s documentation under Browsers and devices, there’s a list of bugs that occur on some browsers. These bugs are no longer listed in the same list for Bootstrap 5. The list includes the following:
- Hover styling was being applied to elements on touch events on iOS, which wasn’t desirable as it was considered as an unexpected behavior.
- Using .container in Safari 8 and above caused a small font size on printing.
- Border radius was being overridden by validation feedback (but could be fixed by adding an extra .has-validation class).
The list of bugs and issues in Bootstrap 4’s documentation also details bugs
that happened on browser versions that are no longer supported.
Improved Grid System
Because there were some issues upgrading from version 3 to 4, Bootstrap 5 retains the bulk of the system this time, building upon the existing system instead of completely changing it. Some of the changes are:
- The gutter class (.gutter) has been replaced to a utility (.g*) much like the margin and padding
- Vertical spacing classes have also been included
- Columns are no longer defaulted to position:relative
New Bootstrap Icon Library
Bootstrap now boasts its own open source SVG icon library with over 1,300 icons. It is custom made for the framework’s components but you can still work with them on any project.
Given that they are SVG images, they can quickly scale and can be implemented in many ways and also styled with CSS.
You can install the icons using npm:
$ npm i bootstrap-icons
Updated Forms
Bootstrap 5 has introduced a section completely dedicated to Bootstrap forms with improved documentation and components. It now has a single set of form controls and redesign existing elements instead of generating new elements through pseudo-elements. Bootstrap forms give a better look now.
Other changes
There are many more changes that are either minor or don’t cause a drastic, noticeable change. These changes are:
- Bootstrap 5 now uses Popper v2. Make sure to upgrade your version of Popper. Popper v1 won’t work anymore, as Bootstrap 5 requires @popperjs/core instead of the previous popper.js..
- Previously, to make an element hidden but keep it discoverable for assistive technologies, the class .sr-only was used. This class is now replaced with .visually-hidden.
- Previously, to make an interactive element hidden but keep it discoverable for assistive technologies, you needed to use both .sr-only and .sr-only-focusable classes. In Bootstrap 5, you just need to use .visually-hidden-focusable without .visually-hidden.
- Blockquotes with a named source are now wrapped by a <figure> element.
What’s New
Finally, Bootstrap brings a lot of exciting additions to its library in version 5. Some of these changes include new features, new supported concepts, new components, new utility classes and more.
Responsive Font Sizes is now enabled by default
Responsive Font Sizes (RFS) was in previous versions of Bootstrap, but it was disabled by default. Bootstrap 5 enables RFS by default, making fonts in Bootstrap more responsive. RFS is a side project created by Bootstrap to initially scale and resize font sizes responsively. Now, it’s capable of doing the same for properties like margin, padding, box-shadow, and more.
What it does is basically to calculate the most fitting values based on the browser dimensions, and these calculations are translated to calc functions when it’s compiled. Using RFS also ditches the previous usage of px to use rem, as it helps achieve better responsiveness.
If you’re using the Sass files for Bootstrap, you can now use mixins made by RFS, including font-size, margin, padding, and more, which allow you to make sure your components and styles are responsive.
Right-to-left support
Bootstrap 5 adds tight-to-left (RTL) support using RTLCSS. As Bootstrap is used all around the world, it’s a big and important step to make RTL support available out of the box. For that reason, Bootstrap 5 has ditched specific naming for directions (for example, usage of left and right) in favor of start and end. This makes Bootstrap flexible enough to work with both left-to-right (LTR) and RTL websites. For example, .dropleft is now .drop start, .ml-* is now .ms-*, and more.
To make Bootstrap recognize and apply RTL stylings on your website, you need to set the dir of <html> to rtl, and add a lang attribute with the RTL language of the website. For example, lang=”ar”.
Finally, you’ll need to include Bootstrap’s RTL CSS file:
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css” integrity=”sha384-gXt9imSW0VcJVHezoNQsP+TNrjYXoGcrqBZJpry9zJt8PCQjobwmhMGaDHTASo9N” crossorigin=”anonymous”>
And with that, your website will support RTL.
New breakpoint
Bootstrap 5 brings support for the new breakpoint xxl targeting devices with width greater than or equal to 1400px. Previously, the highest breakpoint was xl, which targeted devices with width greater than or equal to 1200px. This change allows for better responsiveness for devices with larger screens, as the xl breakpoint was not enough.
Using the new breakpoint is similar to all of the other breakpoints. For example, to apply padding for devices width greater than or equal to 1400px, you can do that using the class .p-xxl-2.
New components
Bootstrap 5 brings some new components into the library. Some of these components were part of other components and are now standalone components.
Accordion
Previously, Accordion was part of the Collapsible component, rather than it being its own component. In Bootstrap 5, Accordion is a new component. With Accordion comes a new class, .accordion, that holds inside it a list of accordion items. Additionally, Accordions have a new style compared to the previous style in Bootstrap 4. Here’s an example of the accordion component:
Bootstrap 5 also adds some classes to change the styling of the Accordion. For example, .accordion-flush removes some of the styling of the default Accordion like the background or border colors. You can also make an accordion item always open by removing the data-bs-parent attribute from its .accordion-collapse element.
Offcanvas
Another new component is Offcanvas, which allows you to create an overlaying sidebar. It’s the sidebar that’s usually used on websites to show the menu on smaller devices. You can place it on any side of the page by using .offcanvas-start for left in LTR, .offcanvas-top for top, .offcanvas-end for right in LTR, and .offcanvas-bottom for bottom. You can also specify whether the Offcanvas should have a backdrop or not.
Floating Label
Floating Label is a new component part of the Form components. It allows you to create an input whose label looks like a placeholder at first, then when the input receives focus the label floats to the top of the input above the value. It also works on <select> elements and <textarea> elements.
Other additions
Other than the new components, there are new classes for existing components, new utility classes, new helper classes, and more. Here’s a list of all the other new additions in Bootstrap 5:
- Class .row-cols-auto has been added, which allows the columns to take their natural width.
- A new utility class has been added to justify content called .justify-content-evenly.
- Previously, gutters between columns were achieved using spacing utilities. Now, you can set the gutter between columns using the new Gutter layout utility. To set a horizontal gutter, use .gx-*. To set vertical gutter, use .gy-*. To set gutter both horizontally and vertically, use .g-*.
- A start script has been added to the Bootstrap package when installed with npm or Yarn. The start script compiles the CSS and JavaScript files, builds the documentation, then starts a local server.
- Vertical alignment utility classes can now be used with tables.
- A new class .caption-top has been added, which allows placing the caption of a table at the top rather than at the bottom.
- There’s now the option to change the divider in Breadcrumb using the CSS variable –bs-breadcrumb-divider.
- There’s a new dark variant for carousels using the class .carousel-dark, and a new dark variant for dropdowns using .dropdown-menu-dark.
- There’s now improved styling for file inputs in forms.
- A new color input has been added, using the class .form-control-color.
Conclusion
Bootstrap has been one of the leading CSS libraries for most of the past decade. It allows developers to easily build responsive websites and deliver a good user experience. With Bootstrap 5’s additions and changes, this process will be even easier and will allow for improving website’s designs and providing a good user experience. If you’re using Bootstrap 4 and you’re thinking of migrating to Bootstrap 5, the migration is easy and you probably won’t need to make a lot of changes.
