Bootstrap has been around for more than 8 years and it is the most popular CSS Framework in the world. It powers roughly 18 million websites worldwide and these numbers are still growing. If you’re a web developer there is almost zero chance that you wouldn’t have at least heard about it.

The alpha version of Bootstrap 5 has been officially launched on 16th of June, 2020 bringing improvements such as removing jQuery as a dependency, dropping support for Internet Explorer 10/11, lots of improvements for the Sass files and a brand new Utility API.

Some of the major changes will be removing jQuery altogether as a dependency, adding back custom icons powered by SVG (which they already launched last year), some CSS & Javascript simplifications, fixes and improvements and removing support for IE 10 & 11.

Here’s a list of all the expected changes:

Removing jQuery
Dropping support for IE 10 & 11
Custom SVG icon library
Switching to Hugo from Jekyll
Major Javascript updates
Minor CSS and class updates and fixes

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.

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

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.

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.

Download Now