Submit
Login Register

Bootstrap 5.3.0-alpha3

Hot on the heels of our second alpha, we’re releasing a third (and unexpected) alpha for v5.3.0 today with some fixes for some Node Sass compilation errors. In addition, we’ve added a handful of other updates. We’re still on target to ship our stable release soon!

Once again, if you’re new to the v5.3.0 alpha releases, please read through the Migration guide for the first alpha and last month’s second alpha.

Here’s a look at what’s changed in this quick release:

  • Fixed wrong interpolated variables with node-sass/Hugo.
  • 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.

Get the release

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

npm i bootstrap@v5.3.0-alpha3

Read the GitHub v5.3.0-alpha3 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-alpha2

@mdoMarch 24, 2023

Our second alpha release of v5.3.0 has landed with a ton of enhancements and bug fixes for our new color modes! There’s still more to come, but we’ve held off shipping until we ironed out enough issues. Huzzah, we have!

This v5.3.0 release is a monumental update for Bootstrap 5. It’s big enough that it could’ve been a v6 on its own, but we wanted to do right by the community and get color modes out the door without the massive major release upgrade. We’re getting super close now, so bear with us as we continue to chip away at this.

And, in the meantime, here’s the rundown on what’s changed since our first alpha. 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.

CSS variables

  • Removed several duplicate and unused root CSS variables.

Color modes

  • Dark mode colors are now derived from our theme colors (e.g., $primary) in Sass, rather than color-specific tints or shades (e.g., $blue-300). This allows for a more automated dark mode when customizing the default theme colors.
  • Added Sass maps for generating theme colors for dark mode text, subtle background, and subtle border.
  • Snippet examples are now ready for dark mode with updated markup and reduced custom styles.
  • Added color-scheme: dark to dark mode CSS to change OS level controls like scrollbars
  • Form validation border-color and text color states now respond to dark mode, thanks to new Sass and CSS variables.
  • Dropped recently added form control background CSS variables and reassigned the Sass variables to use CSS variables instead. This simplifies the styling across color modes and avoids an issue where form controls in dark mode wouldn’t update properly.
  • Our box-shadows will once again always stay dark instead of inverting to white when in dark mode.
  • Improved HTML and JavaScript for our color mode toggle script. The selector for changing the active SVG has been improved, and the markup made more accessible with ARIA attributes.
  • Improved docs code syntax colors and more across light and dark modes.
  • Removed the ability to nest light mode components within dark mode. This was super incomplete unfortunately and just isn’t practical without quadrupling our selectors for every component. Maybe in v6!

Typography

  • We no longer set a color for $headings-color-dark or --bs-heading-color for dark mode. To avoid several problems of headings within components appearing the wrong color, we’ve set the Sass variable to null and added a null check like we use on the default light mode.

Components

  • Cards now have a color set on them to improve rendering across color modes.
  • Added a new .nav-underline variant for our navigation with a simpler bottom border under the active nav link. See the docs for an example.
  • Navs now have new :focus-visible styles that better match our custom button focus styles.

Helpers

  • Added a new .icon-link helper to quickly place and align Bootstrap Icons alongside a textual link. Icon links support our new link utilities, too.
  • Added a new focus ring helper for removing the default outline and setting a custom box-shadow focus ring.

Utilities

  • Renamed Sass and CSS variables ${color}-text to ${color}-text-emphasis to match their associated utilities.
  • Added new .link-body-emphasis helper alongside our colored links. This creates a colored link using our color mode responsive emphasis color.
  • Added new link utilities for link color opacity, underline offset, underline color, and underline opacity. Explore the new links utilities.
  • 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 Deprecated the .text-muted utility and $text-muted Sass variable. It’s been replaced by .text-body-secondary and $body-secondary-color.

Docs

  • Updated docs page table of contents to use Scrollpy (shoutout to our v3 docs!).
  • Revamped syntax highlighting colors for code snippets across color modes.
  • Improved content and rendering of several docs callouts.
  • Document more color mode features and usage suggestions.
  • Added theme toggling to examples pages.
  • Updated dependencies across the board, including in our guides.

Known issues

While not an exhaustive list, here’s some of the stuff we’re going to be working on before calling this release stable. You can track these and more in the v5.3.0-stable project on GitHub.

  • Add new functionality to utilities with mixins and functions.
  • Some components need another pass at enabling full-color mode responsiveness. Bear in mind, some components like buttons won’t get full-color mode adaptivity until v6.
  • Labels in disabled floating forms have incorrect rendering.
  • Docs need to be updated for modifying theme colors across color modes.
  • Examples need another pass for dark mode support, new screenshots, and more.
  • Improve click/tap area for range inputs.

Up next will be the stable release of v5.3.0. Originally this was planned as a beta, but I think we’re getting close enough to call this final with one more release.

Get the release

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

npm i bootstrap@v5.3.0-alpha2

Read the GitHub v5.3.0-alpha2 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-alpha1

@mdoDecember 24, 2022

It’s a Christmas miracle—Bootstrap v5.3.0-alpha1 has arrived just in time for the holiday break! This release brings new color mode support, an expanded color palette with variables and utilities, and more.

We’re keeping things short and simple in this blog post with deeper dives into the new color modes and more coming in future posts. For now, we want you to enjoy the holiday break and come back next year feeling refreshed and rejuvenated. Keep reading for what’s new and we’ll see you next year!

Dark mode and color modes

Bootstrap now supports an explicit opt-in for creating multiple color modes via the data-bs-theme attribute on the root <html> element. We opted for a data attribute solution so that you can create any number of themes instead of just light and dark. We use a new Sass mixin, color-mode(), to generate our dark mode styles with either a data attribute (the default) or a media query. The latter is useful if you only have two color modes and want automatic color mode changing via CSS.

Read more in the new color mode docs.

For those wanting to build something more advanced, you can read how we built our own color mode picker with JavaScript that respects the device or operating system setting by default, but still allows someone to override it with an explicit theme.

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-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> </head> <body> <h1>Hello, world!</h1> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> </body> </html>

Want to use CSS media queries to change the color mode instead? You can also build Bootstrap with Sass and customize how you use color modes. Read the docs to learn more. You can even create custom color modes.

Expanded color palette

We have a huge new color palette update with new Sass variables, CSS variables, and utilities to boot. Foreground and background colors have new secondary, tertiary, and emphasis colors to choose from, while our theme colors have expanded on to include their subtle background colors, subtle border colors, and darker text colors. 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.

Check out the new colors docs.

And more!

And a few more noteworthy changes:

  • Added new CSS variables for grid breakpoints, link colors, close button, alert links, forms, and more. In addition, many components have been updated to use more global CSS variables like --bs-border-color to better respond to changing color modes.
  • Floating forms have been updated to be more bulletproof and now include proper support for textareas.
  • Added many new utilities, including fw-medium, overflow and object-fit utilities, z-index, and more. Plus, border-radius utilities have been updated so that you can combine .rounded-{top|bottom|start|end} with .rounded-{0-5|pill|circle}.
  • Fixed some Popper tooltip and popover consistency issues.

Be sure to consult the v5.3.0 migration guide to see what’s changed as well.

Up next

As we iron out the release with your feedback and bug reports, we’ll also be updating the Bootstrap Blog and Bootstrap Icons sites to use the new themes soon. We’ll also continue to refine how our components and utilities work with the new color modes, adding Sass testing to improve our coverage of how folks build with Bootstrap, and much more.

Get the release

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

npm i bootstrap@v5.3.0-alpha1

Read the GitHub v5.3.0-alpha1 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.2.3

@mdoNovember 22, 2022

We’ve deviated from developing v5.3.0 to ship a new patch release, Bootstrap v5.2.3, with a handful of more urgent bug fixes.

Highlights

  • Added the missing :root CSS variables to our utilities bundle
  • Fixed the deprecation warning with Sass 1.56.0
  • Fixed the RTL translate() direction for carousels
  • Fixed tooltip and popover disposal inconsistencies

We’re heading right back to it with v5.3.0 with support for color modes, new utilities, and more. Look for a pre-release of that soon.

Get the release

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

npm i bootstrap@v5.2.3

Read the GitHub v5.2.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 Icons v1.10.0

@mdoNovember 11, 2022

Bootstrap Icons v1.10.0 is here with nearly 150 new icons. This release includes tons of new variants for person, building, and database icons, plus new brands, rockets, road signs, globes, and many more. We’re now at over 1,900 icons!

150 new icons

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

Some highlights for the new icons include:

  • 22 new person icons
  • 26 new house icons
  • 24 new building icons, including a renamed building to buildings
  • 22 new database icons
  • 24 new street sign icons
  • New globe icons
  • New EV, taxi, bus, and scooter transportation icons
  • New rockets
  • and more!

We also fixed the fill rules for several some issues across the docs, including:

  • De-duped category names Brand and Brands to be just Brand
  • Updated tags on several icon pages for additional aliases

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.

Posted: 11 months ago 0

COMMENTS (0)

You need to register to add a comment. Already a Spanker? Log in

There are no Comments yet.

SIMILAR POSTS