Bootstrap 5.2.0: What You Should Know About the Latest Bootstrap

Bootstrap is one of the best frontend frameworks web developers use to create modern websites or web apps. Over the years, there have been continuous upgrades to this framework, and most recently, the new version has received an extremely intriguing change. The largest update to the framework after Bootstrap 5.0 and 5.1 is Bootstrap v5.2.0.

This version includes a rebuilt page, a responsive off-canvas, additional helpers and utilities, enhanced buttons and inputs, and several underlying changes. Let's examine some significant adjustments made in Bootstrap 5.2.0.

1. Redesigned Documentation

The entire site has undergone a complete revamp with Bootstrap 5.2.0. Although it still retains some of the old Bootstrap flairs, the home page's color now has a brighter shade.

Additionally, the edges are somewhat rounded and darker. The navigation bar and Cancel sub-navigation were both simplified. The updated navigation bar also has a function known as the new version selector, which is available with versions 5.2.0 and higher.

The sidebar is now configured to continuously display links to each page in order to improve discoverability. Searches for documents are now powered by the most recent version of Algolia DocSearch Support.

2. Text Background Helpers

The addition of a.text.bg.* helpers is another recent development. These will automatically establish a background color while also establishing a suitable foreground color.

3. New _maps.scss

In Bootstrap v5.2.0-beta1, a new Sass file called _maps is added to help resolve a problem where updates to an original map did not propagate to its extending secondary maps. It fixes a long-standing problem for people using customized maps.

The following are some of the Maps that were moved to the new _maps.scss file:

$utilities-bg
$utilities-bg-colors
$negative-spacers
$gutters
$theme-colors-rgb
$utilities-colors
$utilities-text
$utilities-text-colors

4. Responsive OffCanvas

The OffCanvas component, which slides material in and out of the sides of your screen, also underwent some changes. This component now comes in a few responsive variants, allowing you to only activate it at particular sizes with offcanvas-{sm|md|lg|xl|xxl}.

5. Thicker Table Dividers

The heavier borders on table separators are now a part of an optional class that you can utilize. The border separating table groups was changed and made thinner and harder to override. Support for striped columns was added to tables using .table-striped-columns.

<table class="table table-striped-columns>
<thead>
   <tr>
     <th scope="col">#</th>
     <th scope="col">Firstname</th>
     <th scope="col">Lastname</th>
     <th scope="col">Sex</th>
   </tr>
</thead>
<tbody>
   <tr>
     <th scope="row">1</th>
     <td>Chris</td>
     <td>Philip</td>
     <td>M</td>
   </tr>
   <tr>
     <th scope="row">2</th>
     <td>Picy</td>
     <td>Cindy</td>
     <td>F</td>
   </tr>
   <tr>
     <th scope="row">3</th>
     <td>Prosper</td>
     <td>Kim</td>
     <td>M</td>
   </tr>
   <tr>
     <th scope="row">4</th>
     <td colspan="2">Bethy</td>
     <td>F</td>
   </tr>
</tbody>
</table>

6. Scrollspy

The new version includes the Intersection Observer API for the scrollspy. It is now simpler to perform actions based on when objects display on the screen, thanks to a JavaScript API. The nav highlighting in Scrollspy implementations is now more precise and reliable.

7. Component CSS variable

In Bootstrap 5.2.0, all elements now incorporate CSS variables to allow for real-customization action, simpler theming, and (eventually) support for color modes beginning with dark mode.

Here is an updated reference list of the pertinent CSS variables that are now available on each component page.

--#{$prefix}btn-padding-x: #{$btn-padding-x};
--#{$prefix}btn-padding-y: #{$btn-padding-y};
--#{$prefix}btn-font-family: #{$btn-font-family};
@include rfs($btn-font-size, --#{$prefix}btn-font-size);
--#{$prefix}btn-font-weight: #{$btn-font-weight};
--#{$prefix}btn-line-height: #{$btn-line-height};
--#{$prefix}btn-color: #{$body-color};
--#{$prefix}btn-bg: transparent;
--#{$prefix}btn-border-width: #{$btn-border-width};
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-border-radius: #{$btn-border-radius};
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

Conclusion

Although Bootstrap 5.2.0 makes it simpler to edit custom components, more developments in this regard are anticipated in future versions. In our next articles, you will be learning how to use the various components of Bootstrap 5.2.0.

Back