The Bootstrap Blog

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

Bootstrap 5 Beta 3

@mdo March 23, 2021

Our final beta for Bootstrap 5 has come with some amazing new changes (including a new component!), documentation updates, and more. We’ve also fixed some important bugs since our last release, in particular with our dependencies. Next up is our stable release!

Keep reading for a recap of what’s new in Beta 3.

New offcanvas component

Offcanvas example

Thanks to our newest team member, @GeoSot, we have a brand new component to unveil in Beta 3—introducing offcanvas! Built on and sharing fundamental pieces of our modals, the offcanvas comes with configurable backdrop, body scroll, and placement. Offcanvas components can be placed on the left, right, and bottom of the viewport. Configure these options with data attributes or via the JavaScript APIs.

We’re excited about iterating on the new offcanvas component and building additional examples and demos with you. Please share any feedback on an issue or pull request as you start to use it in your projects.

New and refreshed examples

New examples

Our examples have been updated in Beta 3 as well. We’ve added four brand new snippet-heavy examples and refreshed a few others. New with this release are several snippets for headers, heroes, features, and sidebars. These new snippets will continue to grow with new additions over time, showing just how fun and easy it is to build with Bootstrap.

New starter example

We’ve also updated our starter template with a refreshed, simplified design and more resource links. We’ll also incorporate this new look and feel into our npm starter project project, and eventually add a Parcel starter project.

Lastly, we’ve updated our pricing, checkout, and sign-in examples. We’ve also added a new jumbotron example to show you how to create your own jumbotron since we removed it in Bootstrap 5.

Improved Sass docs

New Sass docs

Since our last release, we’ve added a new section to nearly every component and utility documentation page for the source Sass code. Where appropriate, we now list Sass variables, maps, loops, and animation keyframes. These are directly linked from our source files, so whenever we ship new code, they’ll automatically be up-to-date.

And more!

Some highlights from the rest of our documentation updates and bugfixes include:

  • Added new .list-group-numbered variation to list groups that uses pseudo-elements for numbering list group items.
  • Removed explicit focus state suppression in Reboot
  • Improved carousel swipe behaviors for RTL
  • Updated accordions to improve transitions and borders when animating
  • Updated Sass customization docs to show how to properly override default variables
  • Fixed tooltips not appearing after rapid focus in and out
  • Fixed dropdown events not bubbling and forms inside dropdowns not propagating
  • Removed flip option from dropdowns
  • Disabled select now render consistently in Chrome
  • Button elements now grow in .nav-fill and .nav-justified
  • JavaScript plugin constructors now accept CSS selectors
  • De-duped the .border-0 utility
  • Fixed event handler removal in dropdown/carousel dispose
  • Added new Parcel guide to the docs
  • Added input focus blur Sass variable
  • Updated .browserslistrc to drop Android and add Safari/iOS 12 as the new minimum version (completing our two latest major releases guideline for supported browsers).

Head to GitHub for a complete list of issues and pull requests in v5 Beta 3. You can also review the v5 beta 3 project board, too.

A huge thanks to another new team member, @rohit2sharma95, for the dozens of pull requests, bug fixes, and code reviews for our JavaScript plugins.

Get the release

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

Looking ahead, we’re eyeing our first stable release for Bootstrap 5! But we also have some other releases on the horizon:

As mentioned in our last release, after v5 goes stable, we’ll look to add 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. Feel free to open issues or pull requests if you have any additional ideas!

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

@mdo February 22, 2021

Bootstrap Icons v1.4.0 adds over 60 new icons as part of a brand new weather category. Also included are some long requested improvements to vertical alignment and a handful of updates to tags and categories.

Keep reading for a preview of the new icons and how icon alignment has changed.

60+ weather icons

New icons in v1.4.0

The new weather category includes over 60 icons for various weather and atmospheric conditions. From fog and haze to rainstorms and hurricanes, we now have icons for just about every weather situation. We undoubtedly have some more work to do to refine and add to this new category, but it’s a pretty big addition to the project. Let us know what you think and what’s missing so we can keep adding to it over time.

Alignment changes

Alignment changes

Also new in v1.4.0 are some alignment changes—before and after are shown above. Previously we used vertical-align: text-top in our CSS to aligning individual icons. This wasn’t as much of an issue when we only had SVGs, but with the addition of icon fonts and their generated CSS in v1.2.0, we had to make some changes.

New in this release is a change to vertical-align: -.125em. This new alignment is similar to that found in the tried and true Font Awesome project. This change essentially raises icons up about 1px to better vertically center them with nearby text.

It may not be perfect in all implementations, so additional changes might still be needed, but this should give you a stronger baseline to start (pun intended). Should you still run into issues, please don’t hesitate to open an issue on GitHub.

And more…

We’ve also made several updates under the hood, from dependencies to build tools. This has resulted in improved speeds for our development scripts and more resilient tooling for packaging our icons. We’ve also included category names into the fuzzy search on the homepage, making it a lot easier to search for groups of icons.

We still have some work to do on our docs and search, so stay tuned as we’ll eventually add category pages and more for easier browsing and navigating. If you’re reading this and want to help improve the Bootstrap Icons docs, please consider opening a PR anytime.

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