The Bootstrap Blog

News and announcements for all things Bootstrap, including new releases, Bootstrap Themes, and Bootstrap Icons.

Bootstrap 5 Beta 2

@mdo February 10, 2021

Our second beta has arrived for Bootstrap 5! We delayed its release to iron out some issues with third-party libraries and stabilize our major changes. We’ve also once again shipped some awesome updates to our documentation.

Next up is our final beta, which we may even promote to a stable release depending on how development proceeds. Stay tuned for that!

Dropdown docs screenshot

Dropdowns saw a lot of work in Beta 2 because of how much has changed in both our JavaScript and in Popper.js (which we depend on for most dropdown, popover, and toolip positioning). We’ve modified our dropdown plugin to add a new data attribute to help separate our own positioning styles with that of Popper’s. The issues we saw—like a .dropstart menu overlapping a button or an incorrect responsive .dropdown-menu-end class—were largely the result of competing positioning.

Now when dropdown menus have data-bs-display="static", we’ll add data-bs-popper="static" via JavaScript to their associated .dropdown-menu. When dropdowns are in our navbars, their menus will have data-bs-popper="none" added. This separates two different positioning libraries, ours and Poppers, and ensures all behaviors are supported. You can see all the options in a new example in our docs. We updated our CSS selectors to use these new data attributes, too.

In addition, we’ve removed the initial margins from dropdowns and popovers, instead of relying on Popper’s offsets. These also conflicted with the default styling for elements positioned by Popper.js. Relatedly, there was a bug in how popover arrows were aligned that has now been resolved.

Color utility docs

Sass docs screenshot

We’ve overhauled our color utility documentation, separating the text color classes from our background-color ones. We’ve also made extensive use of our scss-docs shortcode to include tons more code snippets in our docs.

Both pages now include a new Sass section, showing relevant snippets of our source code that are related to each set of utilities. We list all our available color variables, our theme color variables and maps, associated mixins and loops, and even where these utilities are generated in the utilities API.

Expect this kind of documentation improvements to continue into our next release. Follow along in the draft pull request that adds Sass docs to all our components on GitHub.

JS updates

We’ve spent a significant amount of time in Beta 2 improving our JavaScript plugins to fix bugs and improve behaviors since dropping jQuery.

  • Dropdown now emits events on the .dropdown-toggle instead of the .dropdown.
  • Restored the offset option for dropdowns.
  • Fixed modal toggling when clicking on data-bs-toggle="modal".
  • We now build our base component as a separate .js file.
  • We now prevent getSelector from returning URLs as selector which caused errors in dropdown and scrollspy plugins.
  • Refactored components to use a utility function to define jQuery plugins

Miscellaneous updates

Across the board, we’ve made a few small changes to other components that are worth a brief mention here.

  • Navbars:
    • Added a new .navbar-nav-scroll class to enable vertical scrolling when a collapsed navbar is opened. It’s customizable via Sass and a CSS variable. Read more in the docs.
    • We’ve re-added flex-grow to the .navbar-collapse to restore the flexbox behaviors from v4 and prevent some content from being inadvertently squished.
  • Forms:
    • Removed vertical-align from .form-select
    • Form validation mixin updated with additional parameters
    • Fixed validation icon placement in .form-select
    • Checkboxes and radio buttons are aligned better in input groups
  • Buttons:
    • Added variables for tinting and shading button state colors
    • Suppressed the default focus outline for buttons in Chromium
  • Toasts:
    • Added word-break to .toast-body
    • Added a live example to the docs to trigger a real toast
  • Bundles:
    • Added our helpers to the utilities CSS bundle
  • Carousels:
    • Updated docs examples to use <button>s wherever possible instead of <a> elements.
    • CSS selectors changed for using <button>s as indicators (from .carousel-indicators li to .carousel-indicators [data-bs-target]).

For a more complete list of changes, check out the v5 Beta 2 project board or list of issues and PRs in this release.

Get started

Head to https://getbootstrap.com to explore the new release. We’ve also published this updated as a pre-release to npm, so if you’re feeling bold or are curious about what’s new, you can pull the latest in that way.

npm i bootstrap@next

What’s next

We have three releases coming up next for the team:

  • Bootstrap v5.0.0-beta3 (possibly promoted to v5 stable)
  • Bootstrap v4.6.1 (bringing in some more bugfixes and alignment with the latest in v5)
  • Bootstrap Icons v1.4.0

Our v5 Beta 3 will continue to focus on JavaScript issues and documentation improvements. Tooltips in particular need some attention after our fixes to dropdowns and popovers. After v5 goes stable, we’ll look to adding some of the awesome features we’ve built up in our backlog. Check out the v5.1 project for an idea of what’s being planned.

Support the team

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

Bootstrap v4.6.0

@mdo January 19, 2021

Bootstrap v4.6.0 is here with a couple new features, several bugfixes, and some awesome documentation updates to make v4 more maintainable alongside our development of v5.

Read on for the highlighted changes or head to the v4.6 docs to see the latest in action.

Hugo!

The biggest change in v4.6.0 is under the hood—we’ve overhauled our development environment to match that of v5. Our v4.x docs are now powered by Hugo. That means no more Ruby dependency for v4.x, improved maintainability between major versions, faster development, and incredibly fast build times compared to Jekyll.

Changes

Also available in the v4.6.0 release on GitHub.

Highlights

  • Tooltips and popovers can have custom classes via customClass option.
  • Added new .navbar-nav-scroll class for scrolling expanded navbar contents on mobile devices.
  • For improved accessibiliy, spinners now slow down when prefers-reduced-motion is enabled.
  • v4.x docs are now built on Hugo for easier maintenance and backports from v5.x.
  • Darkened background-color of .dropdown-item for improved hover state contrast, and ligthened the disabled .dropdown-item color.
  • Improved alignment of form validation tooltips.
  • File inputs no longer extend beyond their containers.

CSS

  • #31557: Fix form validation tooltip alignment
  • #31657: Handle the Ubuntu sans-serif case
  • #31700: Suppress flexbox side effects in breadcrumb
  • #31882: Slow down spinners when prefers-reduced-motion
  • #31886: Fixed: Undefined mixin “deprecate” when importing “bootstrap-grid-scss”
  • #32141: Use correct value order
  • #32145: Avoid invisible real file input “spilling” out of container
  • #32160: Add overflow suppression to custom file label
  • #32211: Move negative margin-bottom from .nav-item to .nav-link
  • #32212: Remove needless Stylelint disables
  • #32833: Add .navbar-nav-scroll for vertical scrolling of navbar content
  • Add two new variables for pagination border-radius values; backport of #32423
  • Remove old/unnecessary reboot bug fix; backport of #32631
  • Suppress focus outline for buttons when it shouldn’t be visible in Chromium; backport of #32689
  • Consistently use outline:0 rather than outline:none; backport of #32751
  • Darken dropdown item hover style; backport of #32754
  • Lighten disabled dropdown text to $gray-500

JS

  • #31820: Check for data-interval on the first slide of carousel
  • #31834/#32225: tooltip/popover: add a customClass option
  • #32001: Move js/src/index.js one folder up
  • #32045: tests: fix sanitizer test
  • #32220: Don’t hide modal when config.keyboard is false
  • #32312: build-plugins: switch to “bundled” for babel helpers

Docs

  • #31861: Split up dropdown sizing docs to improve rendering
  • #31892: Remove redundant visually hidden “(current)” from pagination controls
  • #31893: manifest.json: Switch to relative URLs so that we don’t need to change the path with every major/minor release
  • #31898: switch to suggesting jsDelivr as a CDN
  • #31904:
    • docs(forms): use a legend for fieldset instead of aria-label
    • docs(forms): fix incorrect legend nesting in fieldset
  • #31936: forms: change inline custom radio name
  • #31951: Update anchor-js to v4.3.0
  • #31960: Explicitly mention emoji fonts, tweak sentence in typography
  • #31981: list-group.md: fix snippet
  • #32005: Remove bugreport.apple.com since it doesn’t work
  • #32015: Fix redirects
  • #32050: Make docs anchorjs links darker on keyboard focus
  • #32054: Add callouts about using light colors ideally on a dark background
  • #32077: Switch to Hugo
  • #32083: mention “Liberation Sans”
  • #32087: download.md: link to JS files comparison too
  • #32094: Changes to navbar documentation/explanation
  • #32106: Clarify JS bundle docs once more for v4
  • #32137: input-group.md: fix wrong class .visually-hidden
  • #32138: navbar.md: remove loading=lazy from snippets
  • #32147: Fix caniuse.com redirects
  • #32151: Mention user-select-all support in docs
  • #32196: homepage: split snippets and show copy buttons
  • #32203: Switch to jsDelivr for the remaining docs assets
  • #32223: introduction: split comments
  • #32247: Fix typos in tooltip/popover docs
  • #32253: Add Russian translation
  • #32363: Remove useless .text-left in Layout / Overview
  • #32399: Remove duplicated “follow Bootstrap on Twitter” link in Community section
  • #32457: Add mention of the bs-custom-file-input plugin needed for the custom file input
  • #32461: style clipboard button on :focus, not just :hover
  • #32462: Replace Lorem Ipsum placeholder text with more representative (or at least english language) text
  • #32634: Remove incorrect mention of dropdowns for dynamic tab behavior
  • #32639: v4: Add an actual data-touch="false" example in the carousel docs
  • #32728: add v5.0 in versions
  • #32761: Mention stretched-link constraints with table elements
  • #32789: Remove role="button" from CTA links in carousel example
  • #32791: Docs v4: Sass implementation and rounding precision
  • #32809:
    • Clarify Sass import and customize docs for how to modify variable defaults
    • Add an npm starter project callout to a few pages
  • #32827: Add a live toast example to the docs
  • #32759: Mention CSP and embedded SVGs in v4 docs
  • docs(dropdowns): clarify where is .show applied
  • Require .has-validation for input groups with validation
  • Fix mobile menu jump & double border
  • Remove double spaces from homepage SVGs
  • browserconfig.xml: switch to relative image path
  • Tweak the wording for collapse to indicate button is preferred/more semantic; backport of #32632
  • Clarify the $enable-shadows option in our docs; backport of #32685

Examples

  • #31979: v4 Examples/Floating-labels: fix bad behavior with autofill
  • #32198: examples: add the version number in title

Misc

  • #29753: Improve build/generate-sri.js regex
  • #32003: CI: switch to Node.js 14
  • #32008: Update Edge’s Rendering Engine on CONTRIBUTING.md
  • #32486: BrowserStack: test on macOS Catalina instead of High Sierra
  • #32756: Stylelint: disallow some property values
  • Fix for npm 7.x package.json: move version_short variable under the config object; backport of #32737
  • Update build-examples script so that the resulting examples zip file includes only the needed files
  • Various CI tweaks
  • Updated devDependencies

Next up

Our second beta of v5 is coming. We’re working on ironing on some kinks from the update to Popover 2, which has taken longer than expected. This affects our dropdowns, popovers, and tooltips. Once some of the major issues are resolved, we’ll ship our next beta.

Please keep the feedback coming on what we can improve, how our releases are performing, and any other suggestions.

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.3.0

@mdo January 07, 2021

Say hello to over 60 new icons with Bootstrap Icons v1.3.0! We focused our efforts on filling in some holes and expanding some coverage of a few categories. We’re super happy with how the new additions came out and hope y’all love them, too!

As usual, we also snuck in some bug fixes to existing icons and ours docs. After this release, we’re back to focusing on shipping updates to Bootstrap v5 and v4. More on that soon, and in the mean time, enjoy the new icons!

60+ new icons

New icons in v1.3.0

Here’s a look at the new icons in v1.3.0:

  • Added window-dock and window-sidebar
  • Added two symmetry icons
  • Added new stack icon
  • Added two speedometer icons
  • Added four save icons
  • Added rulers icon
  • Added filled variations for phone-vibrate, mouse, mouse2, mouse3, and four hand icons
  • Added several border icons
  • Added paint bucket
  • Added four new badges (3D, AR, VR, WC)
  • Added four lightbulb icons
  • Added eyedropper
  • Added mask icon
  • Added three color palette icons
  • Added layer-forward and layer-backward
  • Added two eraser icons
  • Added two megaphone icons
  • Added four push pin icons
  • Added Whatsapp and Telegram social icons
  • Added dotted circle dash, circle plus, square dash, and square plus

Have some ideas for new icons we should consider? Open an issue to tell us about it!

CDN quickstart with icon fonts

Since we added icon fonts in v1.2.0, it’s been possible to use a CDN to deliver and use Bootstrap Icons in seconds. Include the stylesheet, place short HTML snippets where you want icons, and you’re done! If you want to include it yourself, here’s how.

  1. Include the Bootstrap Icons font stylesheet in the <head> of your website. Or, use @import to include the stylesheet that way.

    <!-- Option 1: Include in HTML -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
    
    /* Option 2: Import via CSS */
    @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css");
    
  2. Add HTML snippets to include Bootstrap Icons where desired.

    <i class="bi-alarm"></i>
    

Want to see it in action? We’ve put together a helpful CodePen demo for using Bootstrap Icons fonts via CDN.

ProTip: Most browsers do not allow SVG sprites to be used across domains, which is why having icon fonts (when SVGs are the preferrable and more accessible method of delivering icons) are so useful. Whenever possible, please use SVGs over icon fonts.

Install

To get started, install via npm:

npm i 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

For the Figma users out there, you can also snag the icons from Figma.

Bootstrap Icons v1.2.2

@mdo December 23, 2020

We’re ironing out the kinks in our new font files with Bootstrap Icons v1.2.2! We went back to the Figma file and ironed out all the fill-rule details to ensure our SVGs translated into font files properly.

We also snuck in a few bug fixes to existing icons, docs, and some slight visual improvements to some existing icons. Get the details below!

Font files

Our icons fonts are (fingers crossed!) free of visual glitches that made so many unusable across Windows devices. For some reason macOS and iOS had no problems, but Windows butchered the font files. Turns out this was a result of inconsistent fill-rule values in our icons, and some font formats and renderers only support a non-zero fill rule. We revisited nearly every icon and got it all sorted out.

Icon fonts

Massive shoutout to the Figma Fill Rule Editor plugin that made this relatively quick and painless to update. You can even see in the plugin’s image below how this rule affects rendering of SVGs.

Figma Fill Rule Editor plugin

Check out the PR for what’s changed under the hood.

Updated icons

Revised icons

A few icons got touched up with the work for our font files to clean up paths and make them more visually pleasing.

  • Locks are a little more legible—they’re taller and narrower.
  • Laptops now have a half pixel gap between their base and screen, making them look a little sleeker.
  • Shields are 1px taller now, with their inner icons now raised 1px as well. No reason to make them not take up the full viewBox.
  • Stopwatch icons look more like actual stopwatches with separate start/stop and lap buttons.
  • The bricks icon has its missing grout line restored.
  • Renamed patch fill icons to fix typos in their file names (fll to fill).

Have some other refinements we should consider? Open an issue to tell us about it.

Last but not least, we ironed out some docs issues. Our navbar is fully functional and inline with the v5 beta site. We also added new aliases for icon filtering on homepage.

Install

To get started, install via npm:

npm i 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

For the Figma users out there, you can also snag the icons from Figma.

Bootstrap Icons v1.2.1

@mdo December 12, 2020

Just a quick release to fix a typo in our package.json for including the font files in our published package.

Get it via npm:

npm i bootstrap-icons

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