Bootstrap Icons v1.1.0

Our first minor release for Bootstrap Icons is here, with over 30 new icons and a few bug fixes. New icons include fill variations for our emoji icons, including a few new emojis, and several new file type icons.

30+ new icons

Here’s a look at our file and emoji icons as of v1.1.0. New in this release for emojis are the wink and heart eyes, along with fill versions for the full set. In addition, we’ve added icons for Word, Excel, PowerPoint, and a general bar chart file type.

Changes

Here’s a more complete look at what’s changed in this release.

• Fixed #415: Properly name grip-horizontal and grip-vertical
• Fixed #423: Update arrow-up-square-fill
• Fixed #437: Make file-earmark variations consistent
• New: Added 18 filetype icons #465
• New: Added 13 emoji icons #66

Install

To get started, install via npm:

npm i bootstrap-icons

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

Figma

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

<3,

@mdo & team

Bootstrap 4.5.3

We’ve updated Bootstrap 4 with a new patch release to fix some bugs, backport some iterative changes from v5, and more. Enjoy!

As you may already know, we’re alternating between v4 and v5 releases to keep both versions moving in tandem. This helps us close the gap between v4 and v5 and make updating to v5 as easy as possible.

Read on for the highlighted changes.

Changes

Also available in the v4.5.3 release on GitHub.

CSS

• #31653: Add a comment to our escape-svg function to note that data URIs must be quoted.
• #31693: Use the custom-control shadow variable instead of the generic input-focus-box-shadow.
• #31793: Backport some v5 changes (improved th styling in Reboot, custom form field styling when printing, and improvements to .text-break).
  • #29714: Keep custom check, radio, and switch theme when printing.
  • #30781: Reboot’s th updates: Inherit font-weight: bold that comes from user agent stylesheets.
  • #30932: .text-break changes to drop overflow-wrap and use word-wrap once again
  • #31754: Improve versions page rendering (also reversed the order while I was here)
• #31846: Backports the z-index change to .close buttons in dismissible .alerts.

JS

• #31000: Avoid multiple change event trigger in buttons plugin. Not applicable to v5 since our button JS plugin has been mostly replaced with pure CSS.
• #31673: Fix dropdown variable always evaluating to true.
• #31696: Ensure hidePrevented.bs.modal can be prevented.
• #31718: Backports new $dropdown-padding-x variable from v5.

Docs

• #30811: Mention GPU acceleration fix in docs callout for popovers. Doesn’t apply to v5 since we’re updating to Popper v2.
• #30838: Explain the dispose method more appropriately.
• #31706: Backports updated margins for code snippets for improved readability.
• #31769: Backports JS bundle guidance from v5.
• #31851: Backports mention of missing to and nextwhenvisible methods.

Misc

• #31297: Switch to xo ESLint config
• Updated devDependencies versions

Next up

We’ll be back to v5 with our third alpha release coming in a couple of weeks. After that, we’ll ship another v4 update with v4.6.0 that continues the v5 backports and feature development. 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.

<3,

@mdo & team

Bootstrap 5 Alpha 2

We’re back at it again with a brand new alpha release of Bootstrap 5! Our second alpha has brought some new and improved features, color contrast improvements, improved helpers and utilities, and some documentation design updates.

Check out the latest in the docs at https://v5.getbootstrap.com. Read the release notes for a full list of changes since Alpha 1. Our migration guide has also been updated with a new section for Alpha 2.

Updated docs nav

We’ve cleaned up the navigation in our docs to make things a little easier to use while on a mobile device or a narrow viewport. We’ve redesigned the main navbar to hide links on small devices, and when expanded, those navigation links now have larger tap targets.

Our subnav has also be streamlined to take up a single horizontal bad on mobile, giving more space for documentation. We’ve also differentiated the expanding and collapsing menu icons between the two navs.

Together this should make it a little faster and easier to navigate our docs, and serve as a fun little demo for others.

Dark carousel

Add .carousel-dark to any .carousel to switch from the default white text, controls, and indicators to black.

Values are configurable via Sass variables. To save on filesize, we’re using a CSS filter to invert out SVGs for the carouse controls. Pretty neat if you ask us!

Dark dropdowns

For the first time since Bootstrap v1 nearly nine years ago, we have dark dropdown menus! Add .dropdown-menu-dark to any dropdown menu to change the appearance. Dark dropdowns are opt-in, so you’ll need to add the class as you go.

We’d like to revisit some of this later in v5 with minor releases that advance dark mode throughout the entire project. Until then, enjoy the new classes!

Redesigned close button

Our close button has been renamed, redesigned, new focus state, and a new color option.

We’ve renamed the class from the rather generic .close to .btn-close. In addition, we’ve dropped the use of × in our HTML for an SVG background-image via CSS. With updated styling all around, the close button has a clearer focus state and even an all-new white variant (also powered by a CSS filter).

Position utilities

Thanks to our contributors, we’ve added new directional positioning utilities. Quickly position an element with our new top, right, bottom, and left utilities with support for 0, 50%, and 100% by default.

Combine with new translate utilities to center elements on an edge or corner, too! The new utilities are configurable and extensible thanks to the utilities API and some smart Sass map defaults.

More highlights

Some other incremental changes to a few components and changes include:

• Container horizontal padding has been updated to match the row gutters variables and values.
• Checkboxes and radios downsized to 1em from 1.25em for improved font scaling support.
• Improved colors with green and cyan getting new values, plus higher contrast ratios all around.
• Improved toast styling, now without overflow: hidden.
• Badge padding increased a smidge.
• Revamped “responsive embed” helpers, now called ratio helpers. New class names across the board, more flexible styles, and a new CSS variable for custom dynamic and responsive ratios.
• Screen reader classes are now “visually hidden” classes.
• New .border-width utility.

See all the changes in the v5 Alpha 2 project board and be sure to read the Migration guide for details on what’s changed since Alpha 1.

Coming in Alpha 3

We’ve pushed some additional breaking changes and important component updates to Alpha 3. To give you a heads up, here are some important upcoming moves:

• Offcanvas support is coming thanks to new side modals!
• We’re revamping the input group component, dropping support for quite a few variations. It’s too complex, supports too many variations, and has had the most annoying border-radius bug through all of v4. (I’m so sorry about that!)
• We’re upgrading floating labels from a docs Example into a fully fledge form layout option, with support for textual inputs, selects, and textareas.
• We’re adding font-size utilities and updating our font-weight utilities.
• RTL is still coming! The PR is being reviewed by our team and we’re hoping to land it in Alpha 3 so we can get some folks testing with it.

For a more up to date list of changes, be sure to follow along with the v5 Alpha 3 project board. More docs improvements are planned with the potential for more breaking changes as well. From there it’s onto final breaking changes in Beta 3.

Release expectations

We’ll be alternating releases across v4 and v5 to keep the momentum up. We’re shipping v4.5.3 next and then moving right back to v5 for Alpha 3. We’ve noted our intended release schedule in our release repo. We’ll also keep updating that repo’s readme as we go.

Get started

Head to https://v5.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

Support the team

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

<3,

@mdo & team

Bootstrap Icons v1.0.0

After five alphas over the last nine months, Bootstrap Icons has officially gone stable with our v1.0.0 release! We’re now over 1,100 icons and are on track to add hundreds more in our upcoming minor releases. This has been a labor of love and I’m thrilled to ship this latest update.

Since our fifth alpha two months ago, over a third of our icons have been redrawn as we fine-tuned paths and shapes. Much of the redrawing and improvements here came as preparation for an icon font, but regrettably that’s been pushed back to a v1.1.0 release as the tooling for generating fonts from SVGs has proven more difficult to get right.

1,100+ icons

Our first alpha had just over 200 icons, and here we are with 1,120 icons in our first stable release. And we’ll only have more in future releases.

Usage

If you’ve been following along these last several months, you’ll know Bootstrap icons are SVG based. That makes them super easy to import, customize, and extend—no matter the project. While they’re part of the Bootstrap family, they can be used anywhere. That’s because they’re released under the MIT license.

Use them as embedded SVGs, as external assets with <img> tags, as an SVG sprite, or even embedded in your CSS. Head to the docs to learn more.

Install

To get started, install via npm:

npm i bootstrap-icons

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

Figma

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

Up next

We’ll revisit the icon font hopefully in time for our next v1.1.0 release. In addition, there are already another 200+ icons drawn and plans for even more after. We’ll continue to fine-tune and iterate on these icons, so keep the feedback and requests coming.

<3,

@mdo & team

Bootstrap 4.5.2

Today’s patch release is aimed at addressing some small issues introduced over the last few versions of Bootstrap 4. Read on for details and update when you’re ready.

From the addition of responsive containers in v4.4.0 to the most recent row and column adjustments, we had been making incremental changes to our grid system. While our changes have solved some issues, they’ve broken other behaviors and introduced new complexities.

Today’s release rolls back and restores a few things:

• #31438 restores the make-container-max-widths mixin. We won’t be using the mixin ourselves, but it will remain in the codebase for the rest of v4 with today’s release. We’ve added a deprecation notice as well.

• #31439 removes flex: 1 0 100% from .rows. This was added to address shrinking rows inside the navbar component after our responsive containers were added in v4.4.0. Removing this rolls us back to the expected grid and flex behavior—your row will shrink unfortunately without further changes. We could add extra custom CSS to address this, but it seems shortsighted to rush into that. Instead, apply .flex-fill to the .row and your row will behave as usual.

Similarly, v4.5.1 already removed the min-width: 0 on .cols. This change was introduced to fix <pre> elements not fitting to a column. This an issue with how flexbox works, where a flex container cannot shrink beyond its children’s content. Rather than force this on every column, we recommend you apply this as needed with a custom utility. (We’ll also aim to add this as a new utility in v5.)

We know this kind of hiccups set you back, so please accept our apologies for the bugs. Be sure to read the referenced pull requests above to get up to speed on what happened and how we fixed it. This CodePen demo has all the known grid issues and fixes implemented in it.

<3,

@mdo & team