Bootstrap 5.3.3

@julien-deramond February 20, 2024

Bootstrap v5.3.3 is here with bug fixes, documentation improvements, and more follow-up enhancements for color modes. Keep reading for the highlights!

Highlights

  • Fixed a breaking change introduced with color modes where it was required to manually import variables-dark.scss when building Bootstrap with Sass. Now, _variables.scss will automatically import _variables-dark.scss. If you were already importing _variables-dark.scss manually, you should keep doing it as it won’t break anything and will be the way to go in v6.
  • Fixed a regression in the selector engine that wasn’t able to handle multiple IDs anymore.

Color modes

  • Badges now use the .text-bg-* text utilities to be certain that the text is always readable (especially when the customized colors are different in light and dark modes).
  • Fixed our color-modes.js script to handle the case where the OS is set to light mode and the auto color mode is used on the website. If you copied the script from our docs, you should apply this change to your own script.
  • Fixed color schemes description in the color modes documentation to show that color-scheme() only accept light and dark values as parameters.

Miscellaneous

  • Allowed <dl>, <dt> and <dd> in the sanitizer.
  • Dropped evenly items distribution for modal and offcanvas headers.
  • Fixed the accordion CSS selectors to avoid inheritance issues when nesting accordions.
  • Fixed the focus box-shadow for the validation stated form controls.
  • Fixed the focus ring on focused checked buttons.
  • Fixed the product example mobile navbar toggler.
  • Changed the RTL processing of carousel control icons.

Docs

  • Dropped unnecessary right margin for example code blocks.
  • Fixed emphasis text utilities usage in background utilities examples section.
  • Added an technical explanation on how to render an accordion expanded by default.
  • Changed Vite config path import in Vite guide.
  • Enhanced the card image description of the .card-img-* classes.
  • Mentioned shift-color() function in the Sass customization page among tint-color() and shade-color().
  • Added missing type="button" attribute to the Cheatsheet examples navigation buttons.
  • Updated the colors table in the customization page to be responsive.

Get the release

Head to https://getbootstrap.com for the latest. It’s also been pushed to npm:

npm i bootstrap@v5.3.3

Read the GitHub v5.3.3 changelog for a complete list of changes in this release.

Support the team

Visit our Open Collective page or our team members’ GitHub profiles to help support the maintainers contributing to Bootstrap.

Bootstrap 5.3.2

@julien-deramond September 14, 2023

Bootstrap v5.3.2 is here with bug fixes, documentation improvements, and more follow-up enhancements for color modes. Keep reading for the highlights!

Highlights

  • Passing a percentage unit to the global abs() is deprecated since Dart Sass v1.65.0. It resulted in a deprecation warning when compiling Bootstrap with Dart Sass. This has been fixed internally by changing the values passed to the divide() function. The divide() function has not been fixed itself so that we can keep supporting node-sass cross-compatibility. In v6, this won’t be an issue as we plan to drop support for node-sass.
  • Using multiple ids in a collapse target wasn’t working anymore and has been fixed.

Color modes

  • Increased color contrast of form range track background in light and dark modes.
  • Fixed table state rendering for color modes with a focus on the striped table in dark mode to increase color contrast.
  • Allow <mark> color customization for color modes.

Docs

Get the release

Head to https://getbootstrap.com for the latest. It’s also been pushed to npm:

npm i bootstrap@v5.3.2

Read the GitHub v5.3.2 changelog for a complete list of changes in this release.

Support the team

Visit our Open Collective page or our team members’ GitHub profiles to help support the maintainers contributing to Bootstrap.

Bootstrap Icons v1.11.0

@mdo September 12, 2023

Bootstrap Icons v1.11.0 has arrived with 100 new icons—including new floppy disk icons, additional brand icons, new person icons, new emojis, some birthday cake, a few new science icons, and more. We’re now at over 2,000 icons!

100 new icons

Here’s a quick look at all the new icons in v1.11.0:

New icons in v1.11.0

Check out the pull request for all the details on which icons were added and which were updated.

I’ve also started adding a new added tag to icon pages with this release. So far I’ve only tagged v1.10.0 and v1.11.0 versions, but more will come. Once those are all tagged, you’ll be able to search for icons added in each release. Stay tuned!

Looking for more new icons? Head to the issue tracker to check for open requests or submit a new one.

Install

To get started, install or update via npm:

npm i bootstrap-icons

Or Composer:

composer require twbs/bootstrap-icons

You can also download the release from GitHub, or download just the SVGs and fonts (without the rest of the repository files).

Figma

The Figma file is now published to the Figma Community! It’s the same Bootstrap Icons Figma file you’ve seen from previous releases, just a little more accessible to those using the app.

Bootstrap 5.3.1

@mdo July 26, 2023

Bootstrap v5.3.1 is here with bug fixes, documentation improvements, and more follow-up enhancements for color modes. Keep reading for the highlights!

  • Color modes:
    • Increased color contrast for dark mode by replacing $gray-500 with $gray-300 for the body color
    • Added our color mode switcher JavaScript to our examples ZIP download
  • Components:
    • Improved disabled styling for all .nav-links, providing .disabled and :disabled for use with anchors and buttons
    • Add support for Home and End keys for navigating tabs by keyboard
    • Added some basic styling to toggle buttons when no modifier class is present
    • Fixed carousel colors in dark mode
  • Forms:
    • Fixed floating label disabled text color
  • Utilities:
    • .text-bg-* utilities now use CSS variables
  • Sass:
    • Add new $navbar-dark-icon-color Sass variable
    • Removed duplicate $alert Sass variables
    • Added a new variable for $vr-border-width to customize the vertical rule helper width
  • Documentation:
    • Added search to our homepage
    • Improved responsive behavior on Dashboard example
    • Improved dark mode rendering of Cheatsheet examples

Get the release

Head to https://getbootstrap.com for the latest. It’s also been pushed to npm:

npm i bootstrap@v5.3.1

Read the GitHub v5.3.1 changelog for a complete list of changes in this release.

Support the team

Visit our Open Collective page or our team members’ GitHub profiles to help support the maintainers contributing to Bootstrap.

Bootstrap 5.3.0

@mdo May 30, 2023

It’s official, the final stable release of v5.3.0 has landed! It’s been a monumental effort to revamp our codebase for CSS variables and color modes, one that will see continued changes leading up to an eventual Bootstrap 6. And we’re so excited to finally ship it!

On top of all the work that’s gone into this release, a lot has happened behind the scenes since we shipped our pre-releases. Keep reading to learn everything that’s new in v5.3.0.

What’s new

Keep reading for the deep dive on all the top new features.

Dark mode

Bootstrap’s core has been rewritten to provide first-class support for dark mode. Moreover, Bootstrap now supports any number of color modes, allowing you to build your own custom themes or more nuanced color modes. Let’s take a look at how our new dark mode works first.

New homepage

Bootstrap’s new dark mode is opt-in by default, meaning you’ll need to set a data-bs-theme attribute on the root <html> element to change the entire page’s design. This was done to best support custom color modes beyond light and dark—more on that later. It also helps folks who aren’t ready for dark mode in their own designs.

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

Need a more isolated dark mode? You can also set the color mode on a parent element like the .dropdown shown below. This will only affect the dropdown and its children instead of the entire page.

html
<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>

New color-mode() mixin

Dark mode styles are written with and generated through the new color-mode() Sass mixin. The mixin allows you to write styles specific to a particular color mode, like dark mode.

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

Together with the new $color-mode-type Sass variable, you can also change how color modes behave in Bootstrap. The default value is data, which tells Bootstrap to generate CSS selectors that scope the color mode’s styles to the data attributes you’ve seen above.

The other supported value is media-query, which generates media query selectors instead. This is helpful for those who want light and dark modes, automatically, and without a user override.

$color-mode-type: media-query;

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

Which outputs to:

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

Read the new color mode docs to learn more.

Toggling color modes

While we haven’t written a new JavaScript plugin for toggling color modes, we’ve written a great script for toggling color modes via data-bs-theme in our docs. Our implementation defaults to a user’s operating system color mode (auto), but also allows users to override that with a particular mode (light or dark) that’s recorded in local storage for easy reference on future page loads. You can use and adapt this script as needed.

New color mode variables

There’s also a new _variables-dark.scss stylesheet that houses dark mode-specific Sass variables. This is where we modify mostly global values, and some component-specific values, for dark mode. We recommend creating separate Sass stylesheets for additional custom color modes (e.g., a blue theme might have _variables-blue.scss). We expect this stylesheet to be simplified in our next major release as we continue to streamline the code base.)

Dark mode colors are all derived from our theme colors, meaning you can easily change the color mode palettes by updating the original theme colors. This means we’re not using our already tinted and shaded colors (e.g., shade-color($danger, 60%) instead of red-800 for the new danger emphasis color).

Bootstrap v5.3.0 ships with dark mode enabled, but you can also disable it by updating the boolean $enable-dark-mode Sass variable.

Read more in the new color mode docs.

Enabling dark mode

If you’re using the CDN or starter template, using the new color modes is straightforward. Add the data-bs-theme attribute with light or dark values to the <html> element and you’ll be using either the light or dark theme.

<!doctype html>
<html lang="en" data-bs-theme="dark">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>

Custom color modes

When we set out to add dark mode support to Bootstrap, we didn’t want to just add a dark mode. We wanted to build the foundations for a color mode system that could be used to create any number of themes and color modes. That’s why we lead with the data-bs-theme attribute and the new color-mode() Sass mixin, and why we’ve added so many new CSS variables in these latest releases.

To add a custom color mode, create your own data-bs-theme selector with a custom value as the name of your color mode, then modify any Sass and CSS variables as needed. We created a separate _variables-dark.scss stylesheet to house Bootstrap’s dark mode-specific Sass variables, but that’s not required for you.

For example, you can create a “blue theme” with the selector data-bs-theme="blue". In your custom Sass or CSS file, add the new selector and override any global or component CSS variables as needed. If you’re using Sass, you can also use Sass’s functions within your CSS variable overrides.

Heads up! Applying color modes to elements that aren’t the <html> or <body> elements requires classes like .text-body and .bg-body. This is because many HTML elements have no set color or background to style until you add them yourself. We’ve included them here for you just in case.

[data-bs-theme="blue"] {
  // CSS variable overrides and styles
}
<div data-bs-theme="blue">
  ...
</div>

Refreshed color palette

We’ve revamped our color palette to include all new Sass variables, CSS variables, and utilities for setting color, background-color, and border-color. Our foreground and background colors have been expanded to include new secondary, tertiary, and emphasis colors, while our theme colors have been expanded on to include their subtle background colors, subtle border colors, and darker text colors.

Check out the new colors docs.

We’ve rebuilt some components (like list groups and alerts) to use these new variables in their source Sass and compiled CSS so that they respond to the color mode changes.

Link styling has infinitely better in v5.3.0 with a slew of all-new link helpers and utilities. First up, we’ve added styles to place icons like Bootstrap Icons alongside links with the new icon link helper.

html
<a class="icon-link" href="#">
  <svg class="bi" aria-hidden="true"><use xlink:href="#archive"></use></svg>
  Icon link
</a>
html
<a class="icon-link" href="#">
  Icon link
  <svg class="bi" aria-hidden="true"><use xlink:href="#arrow-right-short"></use></svg>
</a>

Our other new helper is a new focus ring helper for removing the default outline and setting a custom box-shadow focus ring.

<a href="#" class="d-inline-flex focus-ring py-1 px-2 text-decoration-none border rounded-2">
  Custom focus ring
</a>

On the utilities side, we have new classes for setting link color opacity, underline offset, underline color, and underline opacity. Explore the new links utilities.

<p><a class="link-opacity-10" href="#">Link opacity 10</a></p>
<p><a class="link-opacity-25" href="#">Link opacity 25</a></p>
<p><a class="link-opacity-50" href="#">Link opacity 50</a></p>
<p><a class="link-opacity-75" href="#">Link opacity 75</a></p>
<p><a class="link-opacity-100" href="#">Link opacity 100</a></p>
<p><a href="#">Default link</a></p>
<p><a class="link-offset-1" href="#">Offset 1 link</a></p>
<p><a class="link-offset-2" href="#">Offset 2 link</a></p>
<p><a class="link-offset-3" href="#">Offset 3 link</a></p>

<p><a href="#" class="link-success link-offset-2 link-underline-opacity-25 link-underline-opacity-100-hover">Custom link</a></p>

Lastly, we’ve added a new .link-body-emphasis helper alongside our colored links. This creates a colored link using our color mode responsive emphasis color.

<p><a href="#" class="link-body-emphasis link-offset-2 link-underline-opacity-25 link-underline-opacity-75-hover">Emphasis link</a></p>

New nav underline

There’s a new .nav variant and modifier class with .nav-underline. Add .nav-underline to a .nav to get a simpler bottom border under the active nav link. See the docs for an example.

html
<ul class="nav nav-underline">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

And much more!

Beyond all the color mode updates, new helpers, and new utilities, we have a ton of other quality-of-life updates in this release. Here’s a quick rundown of the highlights:

  • Navs now have new :focus-visible styles that better match our custom button focus styles.

  • CSS variable-based border-width utilities have been reverted to set their property directly (as was done before v5.2.0). This avoids inheritance issues across nested elements, including tables.

  • Added new .border-black utility to match our .text-black and .bg-black utilities.

  • Deprecated the .text-muted utility and $text-muted Sass variable. It’s been replaced by .text-body-secondary and $body-secondary-color.

  • Added a check for interpolated variables to catch compilation errors with Node Sass when using Sass variables in calc() functions.

  • Started using --bs-border-radius variables across more components.

  • Added .d-inline-grid utility class.

  • Fixed .tooltip-inner placement when using variations in fallbackPlacements.

  • Fix selectors for dark mode carousel overrides when compiling with $color-mode-type: media-query.

  • Updated the styling of floating labels when “floated” to include a background-color to help with multiple lines of text in textareas. This also fixes the colors when form elements are disabled in floating forms.

  • Updated RFS to v10.0.0.

Next up

We’ll be shipping some patch releases for v5.3.x in the coming weeks to address any issues that come up. We’ll also be working on v5.4.0, which will primarily focus on improvements to our utilities API and related code. Stay tuned for more updates on that front!

Migrating from earlier alphas

Have a read through the Migration guide for the first alpha, or the blog post for the release announcement, if you’re just getting into v5.3.0.

Get the release

Head to https://getbootstrap.com for the latest. It’s also been pushed to npm:

npm i bootstrap@v5.3.0

Read the GitHub v5.3.0 changelog for a complete list of changes in this release.

Support the team

Visit our Open Collective page or our team members’ GitHub profiles to help support the maintainers contributing to Bootstrap.