Everything about the latest Bootstrap release | Bootstrap 5
Bootstrap 5 is here!
You can get the latest Bootstrap version from https://getbootstrap.com or just do an npm install.
npm i bootstrap
Summary of the major changes
1. jQuery Removed
Bootstrap used jQuery behind the scenes until Bootstrap version 4, but from version 5 onwards it has been completely removed. Although this change doesn’t affect the end-user, it still is a major change.
2. New Logo/Icons and Overhauled Utilities
Amongst one of the biggest changes with Bootstrap version 5 is the introduction of a redesigned logo and several new icons which avoid the usage of an additional library such as Font Awesome, etc. Moreover, they also updated their docs design and invested in adding more utilities to Bootstrap along with a new method of managing them across projects. In their own words, “it is still the same Bootstrap, just slightly refined.”
3. New breakpoint: xxl
Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap. There was a new breakpoint introduced in Bootstrap version 5 which is extra extra large(xxl) used to render for big screens, projectors, and huge monitors.
Bootstrap now also provides support for languages that are written right-to-left such as Arabic.
There are two strict requirements for enabling RTL with Bootstrap:
Add an appropriate
lang="ar", on the
From there, an RTL version of CSS needs to be included. Here’s an example.
<!doctype html> <html lang="ar" dir="rtl"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://firstname.lastname@example.org/dist/css/bootstrap.rtl.min.css" integrity="sha384-LPvXVVAlyPoBSGkX8UddpctDks+1P4HG8MhT7/YwqHtJ40bstjzCqjj+VVVDhsCo" crossorigin="anonymous"> <title>مرحبا بالعالم!</title> </head> <body> <h1>مرحبا بالعالم!</h1> </body> </html>
5. Offcanvas component
The offcanvas component has no placement by default. Therefore, one of the modifier classes present below can be added:
.offcanvas-startplaces offcanvas on the LEFT of the viewport
.offcanvas-endplaces offcanvas on the RIGHT of the viewport
.offcanvas-topplaces offcanvas on the TOP of the viewport
.offcanvas-bottomplaces offcanvas on the BOTTOM of the viewport
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here. </div> </div>
.card accordion component has now been replaced with a new
The new accordion includes Bootstrap Icons such as the chevron icon indicating state and clickability.
7. Updated Forms
Bootstrap has now consolidated all their forms styles into a new Forms section (including the input group component) to give them the emphasis they deserve.
Customizable appearance for checkbox, radio, select, file, range, etc.
New file input
If you’re still using Bootstrap 3, I’d recommend you to first move onto Bootstrap 4 instead of directly jumping onto Bootstrap 5. Checkout their migration guide for further details. For further details check out the official documentation for Bootstrap version 5.
Thanks for reading this article hope it was worth the time. Keep learning!