Everything about the latest Bootstrap release | Bootstrap 5

Bootstrap 5 is here!

May 20, 2021

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.

Screenshot from https://getbootstrap.com/docs/5.0/layout/breakpoints/

4. RTL

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:

Set dir="rtl" on the <html> element.
Add an appropriate lang attribute, like lang="ar", on the <html> element.

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://cdn.jsdelivr.net/npm/bootstrap@5.0.1/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

It’s similar to a sidebar component that can be toggled using JavaScript to appear from the left, right, or bottom edge of the viewport.

The offcanvas component has no placement by default. Therefore, one of the modifier classes present below can be added:

.offcanvas-start places offcanvas on the LEFT of the viewport
.offcanvas-end places offcanvas on the RIGHT of the viewport
.offcanvas-top places offcanvas on the TOP of the viewport
.offcanvas-bottom places 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>

6. Accordion

The .card accordion component has now been replaced with a new .accordion component. The new accordion still uses the Collapse JavaScript plugin internally, but with custom HTML and CSS to support it which makes it better and easier than ever to use.

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.

Floating Labels
Customizable appearance for checkbox, radio, select, file, range, etc.
New file input
Screenshot from https://blog.getbootstrap.com/2021/05/05/bootstrap-5/#new-accordion

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!

Programmer Couple