The Bootstrap Blog

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

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

Bootstrap Icons v1.2.0

@mdo December 11, 2020

Our latest Bootstrap Icons release includes dozens of new icons, redesigned documentation, and the most highly requested new feature—icon fonts!

New social icons

We’re starting slow with social icons—just a handful of the biggest sites and networks folks are likely to need. We’ll keep this list purposefully small as the intent isn’t for full coverage. We’ll aim to add a few over time, but this should suffice for the time being!

Social icons

New media icons

The other main addition is our extended suite of media icons. We had folks ask for more options when it came to media controls, as well as different media types, so we’re getting the ball rolling with this update.

Media icons

Icon fonts!

Finally, they’re here! We’re now generating web fonts for our icons thanks to a wonderful project, Fantasticon. To start, we’re generating two web font formats—.woff and .woff2. We’re also including an HTML index of all icons in web font format, powered by a generated CSS file.

Web fonts index

This is our first foray into icon fonts, and we’re likely to make some tweaks along the way. Help us iron out any kinks by testing the fonts yourself and sharing any feedback in an issue.

Refreshed docs

New Icons homepage

The homepage for Bootstrap Icons has a new look thanks to an updated hero. The new hero features a new colorful icon image, clearer project description, and an upfront npm i snippet to help folks get started faster. A new notice at the top links to the blog post to tell folks what’s new, too.

New Icons permalink

Individual icon permalink pages have also been refreshed and greatly simplified. We’ve reduced the main example down to one instance of the icon, and expanded the examples below it to include the icon in more Bootstrap components.

The new permalink sidebar also features new and improved access to the icons. Need just an SVG or two? Use the new Download SVG button. Looking for the HTML for the new icon fonts? Just copy-paste. And as always, want the raw SVG HTML? That’s still there, too.

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.