What is new with Bootstrap v5.3

Duygu Bayrakci Front End Developer

Frontend Development

5 min. read

Hello Web Developers!

The latest stable version of Bootstrap, Bootstrap 5.3.0, comes with many exciting enhancements and features that will empower your projects with greater flexibility and customization options. Here are the key innovations introduced with Bootstrap 5.3.0:

Dark Mode Support: With Bootstrap 5.3.0, dark mode support is now available. This allows users to comfortably navigate your website in a dark interface. Additionally, it provides flexibility to customize this mode using color modes.

<!doctype html>
<html lang="en" data-bs-theme="dark">
<!-- ... -->
</html>

The new dark mode in Bootstrap is optional by default, meaning you'll need to add a data-bs-theme attribute to the root element to change the design of the entire page.

If you need a more isolated dark mode, you can also set the color mode on a parent element, as shown below with a dropdown. This will only affect the dropdown and its child elements without impacting the entire page.

<div class="dropdown" data-bs-theme="light">
<!-- Light dropdown content -->
</div>
<div class="dropdown" data-bs-theme="dark">
<!-- Dark dropdown content -->
</div>

Bootstrap's new dark mode is flex-bound by default, meaning that the root system requires a data-bs-theme attribute modulation to change the design of the entire page.

If you need a more isolated dark mode, you can also set the color mode in a parent element like .dropdown here. However, you can only see the drop-down menu and its sub-items, it will affect the entire program.

<div class="dropdown" data-bs-theme="light">
 <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonLight" data-bs-toggle="dropdown" aria-expanded="false">
   Default dropdown
 </button>
 <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonLight">
   <li><a class="dropdown-item active" href="#">Action</a></li>
   <li><a class="dropdown-item" href="#">Action</a></li>
   <li><a class="dropdown-item" href="#">Another action</a></li>
   <li><a class="dropdown-item" href="#">Something else here</a></li>
   <li><hr class="dropdown-divider"></li>
   <li><a class="dropdown-item" href="#">Separated link</a></li>
 </ul>
</div>
<div class="dropdown" data-bs-theme="dark">
 <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonDark" data-bs-toggle="dropdown" aria-expanded="false">
   Dark dropdown
 </button>
 <ul class="dropdown-menu" aria-labelledby="dropdownMenuButtonDark">
   <li><a class="dropdown-item active" href="#">Action</a></li>
   <li><a class="dropdown-item" href="#">Action</a></li>
   <li><a class="dropdown-item" href="#">Another action</a></li>
   <li><a class="dropdown-item" href="#">Something else here</a></li>
   <li><hr class="dropdown-divider"></li>
   <li><a class="dropdown-item" href="#">Separated link</a></li>
 </ul>
</div>

Custom Color Mode Support: Bootstrap is no longer limited to just light and dark themes. You can create your custom color themes, allowing you to fully personalize your web projects.

Expanded Color Palette: A new color palette that complements theme colors has been added, making your website more attractive and user-friendly.

New Link Helpers and Services: Bootstrap 5.3.0 introduces new services and link styles to make it easier to add icons to links. Additionally, new helpers are available for adding custom focus rings.

New Navbar Underline Option: You can now have an underline on the active page in the navbar, providing clearer navigation.

More Helpers and Services: Bootstrap 5.3.0 includes a range of new services, helper classes, and bug fixes.

Color Mode Mixin: Dark mode styles are written and generated using the new color-mode() Sass mixin. This mixin allows you to write styles for a specific color mode.

@include color-mode(dark) {
.element {
  color: var(--bs-primary-text-emphasis);
  background-color: var(--bs-primary-bg-subtle);
}
}

You can also change the behavior of color modes in Bootstrap using the new $color-mode-type Sass variable. The default value is "data," instructing Bootstrap to generate styles based on data attributes as seen above. Another supported value is "media-query," which creates media query options, useful for those who want automatic switching between light and dark modes without user intervention.

Color Mode Variables: Dark mode colors are derived from theme colors, allowing easy customization of color mode palettes.

With this new update, Bootstrap 5.3.0 enables you to enhance your web projects, making them more visually appealing and functional. Features like dark mode and custom color themes significantly improve the user experience. For more details about this update, you can visit the official Bootstrap website.