With our first beta release of Bootstrap 5, we’re calling it on new features and breaking changes. From here on out, we’re only fine-tuning features, bugs, and documentation on our way to a stable v5 release. Woohoo!
Just like with the v4 development process, our docs for v5 have been temporarily hosted on a subdomain for the next major release. Starting today, those docs are being moved to the main domain and our old v5.getbootstrap.com domain will redirect.
There are some really awesome new features—RTL!—that have been added in this release, and they’ve come with some important changes. Keep reading for the lowdown and let us know what you think!
RTL
Our biggest addition to the project in years, we’ve finally added RTL support to Bootstrap! Please join me in giving @ffoodd—one of our newest contributors and author of the RTL pull request—a massive thank you. The pull request includes nearly 50 references to existing issues and PRs that have tried to implement the feature into our core.
At a high level, our RTL approach includes a handful of changes:
Five new RTL Examples that show our new RTL CSS in action, converting our Album, Checkout, Carousel, Blog, and Dashboard examples into all new right-to-left equivalents.
Our approach is built on RTLCSS, an awesome project that helps reprocess an existing LTR stylesheet for RTL. We’ve classified it as an experimental feature for now, anticipating that we’ll get some of this wrong. We’re looking to the community to help us round out the feature as we wrap up some remaining todos.
This issue has some outstanding todos already planned for our team to address. See something else we can improve? Please consider opening an issue or pull request.
Part of our approach to adding RTL to Bootstrap was to add it in a way that felt future-friendly to ourselves and the web at large. As such, we’ve embraced the spirit of CSS logical properties and have renamed several classes and variables. It’s a risky change because of the size and impact of the change, but we hope you’ll appreciate it overall!
Most of you have already interacted with logical properties thanks to our flex utilities—they replace direction properties like left and right in favor start and end. Things like align-items-end have been welcomed additions. This makes horizontal directional class names appropriate for LTR and RTL without any additional overhead moving forward.
For example, in a LTR context, instead of .ml-3 for margin-left, use .ms-3. Be sure to read the RTL Migration guide for a full list of renamed classes and variables.
Popper.js v2
We’ve upgraded Popper.js from v1.x to v2.x, bringing with it some small breaking changes to our tooltips and popovers. These two changes are why we haven’t been able to update to v2.x sooner.
Removed offset option from our Tooltip/Popover and Dropdown plugins; this can still be achieved using the popperConfig parameter.
The fallbackPlacement option has become fallbackPlacements.
Popper.js v2 also comes with a smaller file size for our primary dependency, updated positioning calculations, and much more. Beyond that, our tooltips and popovers are unchanged and just as powerful.
Namespaced data attributes
We’ve renamed all our data attributes to include bs as an infix, thereby namespacing all the HTML attributes that enable JavaScript behaviors from our plugins. See #31827 for details. It helps keep Bootstrap-required JavaScript triggers clearly identified throughout your projects.
Making this change is a tad annoying, but easy enough to remedy with a find and replace. The new attributes work just like the old ones, just a little more specific. For example, here’s a dropdown button and menu with the newly renamed data-bs-toggle attribute.
After dabbling in some JavaScript solutions to positioning toasts, we’ve landed on a new CSS-only approach thanks to our new positioning utilities. This comes with some minor breaking changes—namely some changes to exact CSS properties and how we toggle visibility of the toasts—but largely keeps them intact.
Beyond the namespacing, we’ve been chipping away at a few other JavaScript improvements and bug fixes. Here’s a rundown of what’s new:
Created a new base component to share logic across our components. See #29370.
Migrate to more modern APIs across our plugins. See #32095.
Tooltips and popovers can now have custom classes. See #32217.
Don’t hide modal when config.keyboard is false. See #32179.
More JavaScript updates are coming soon, from performance and file-size improvements to new features.
States in the utilities API
One of the biggest new features of Bootstrap 5 is our utilities API, an extensible way to customize, add, or remove Bootstrap utilities. We’ve been iterating along the way and our newest improvement is the ability to add pseudo-class variants with the state option.
Use the state option to generate pseudo-class variations. Example pseudo-classes are :hover and :focus. When a list of states are provided, classnames are created for that pseudo-class. For example, to change opacity on hover, add state: hover and you’ll get .opacity-hover:hover in your compiled CSS.
Need multiple pseudo-classes? Use a space-separated list: state: hover focus.
Elsewhere we’ve made a handful of other breaking changes and improvements. The most notable updates include:
Breaking: Renamed scale-color() function to shift-color() . See #32149.
Breaking: Simplified the make-container() mixin and $container-padding-x. See #31735.
Fixed: Corners remain rounded now in vertical button groups. See #31303.
Fixed: Removed default linear gradient on some table rows that caused undesirable performance. Still more work to do here FYI. See #32277.
Updated: Breadcrumbs now have a simplified appearance. Use utilities to restore the padding, background-color, and border-radius as desired. See #32249.
Updated: Finalized browserslist configuration to match our supported browsers. See #30986.
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.
Our third alpha release has landed with tons of updates to our components, utilities, docs, forms, JavaScript, and more. This is a larger alpha release for us and sets us up for our first beta where we’ll introduce some final breaking changes and features.
We’re trying to move fast and keep the future of the project and the web in general in mind, so this release is an important milestone for us. We’re balancing practical migration from v4 with meaningful changes that reflect the ever-changing front-end community.
We think you’ll love this release, so keep on reading and let us know what you think!
Components
We’ve improved a handful of components in this release, and even dropped one for some new and improved utilities.
New accordion
We’ve dropped the .card based accordion for a brand new .accordion component, solving several bugs in the process. Our new accordion still uses the Collapse JavaScript plugin, but with custom HTML and CSS to support it, it’s better and easier than ever to use.
The new accordion includes Bootstrap Icons as chevron icons indicating state and click-ability. We’ve included support for a flush accordion (add .accordion-flush) to remove the outer borders, allowing for easier placement inside parent elements.
Block buttons are no more in v5—we’ve dropped the .btn-block class for .d-grid and .gap-* utilities. This allows for the same behavior and style, but with much greater control over spacing, alignment, and even responsive layout options.
We’re always looking for new ways to improve our documentation, and this release is no different. We have a ton of changes big and small.
We’ve added a keyboard shortcut to focus you on the search field. Hit Ctrl + / to trigger it.
We’ve also rewritten the docs sidebar to use actual <button> elements instead of anchors, and improved the focus styling.
Content-wise, we’ve renamed the “Navs” page to “Navs & Tabs” to help folks find our tab JavaScript features better. We’ve also made some style changes, improving the focus styles of heading anchor links and removing text wrapping from code snippets for shorter and easier to read code.
Sass
Three important and helpful changes to our Sass source code:
We’ve switched to Dart Sass with LibSass being deprecated. We’ve been testing our builds with Dart Sass for a while and decided to make the switch with LibSass being deprecated just a couple of weeks ago. We’re holding on the Sass modules for now.
The color system which worked with color-level() and $theme-color-interval was removed in favor of a new color system. All lighten() and darken() functions in our codebase are replaced by tint-color() and shade-color(). These functions will mix the color with either white or black instead of changing its lightness by a fixed amount. The scale-color() will either tint or shade a color depending on whether its weight parameter is positive or negative. See #30622 for more details.
We’ve added a Sass variable for CSS custom property prefixes.
JS
Ahead of some larger and necessary JavaScript changes in Beta 1, we’ve shipped a few updates to our plugins.
Simplified dropdown’s placement
Removed redundant polyfills since we dropped IE and Legacy Edge
Fixed the carousel data-interval bug by checking for data-interval on the first slide
Removed Manipulator.toggleClass to simplify some code since we only used it one place
Utilities
Utility classes are incredibly powerful in Bootstrap, especially with our new utilities API.
With our first beta, we’ve overhauled our API docs to provide clearer examples and information on adding, modifying, removing, and extending our default utilities.
In addition, we’ve added some new default utilities to make life a little easier:
Added .d-grid for display: grid
Added .fs utilities for font-size
Renamed font-weight utilities to .fw
Added .rounded-1, .rounded-2, and .rounded-3 for new small, medium, and large border-radius utilities
Added .overflow-visible and .overflow-scroll utilities
Our next release will also add another powerful feature to our utilities, pseudo-class support!
Forms
Forms have some exciting changes thanks to the addition of floating labels as a fully-fledged form layout option and a new file input.
Floating labels
Floating labels include support for textual inputs, selects, and textareas. We have one limitation with textareas where multiple lines of text can be obscured by the floating label. We’re working on fixes for this, so if you have ideas, please let us know!
New file input
We’ve dropped our custom .form-file class for additional styles on the .form-control class. This means we no longer require additional JavaScript to make our file input styles functional—the new form file is all CSS!
Input group rounded corners
Beyond that, we’ve finally resolved ourselves to adding a new class to fix the rounded corners on input groups when using validation. Add the .has-feedback class to the .input-group to enable validation messages inside input groups without any visual regressions. The good news is this is also being backported to v4 in our next release.
And more
In addition, we’ve made a few other form-related improvements:
Removed explicit height from most of our form controls.
Fixed the disabled checkbox toggle buttons
Added docs examples for disabled .form-control, .form-select, and .form-range elements
Have some form feature requests or improvements we should consider? Please open an issue!
Quality of life
Lastly, across the board we’ve made some minor updates to browser support, Reboot styling, components, and more
Moved our preferred CDN from BootstrapCDN to jsDelivr
Dropped support for Legacy Edge (woohoo!)
Updated to Node.js 14 and PostCSS 8.x
Removed obsolete prefixes in our CSS
Added cursor: pointer and heights to color inputs
Removed background-clip on .btn-close so the background-image is no longer clipped
Improved sans-serif font selection in Ubuntu
Spinners now slow down when reduced motion is enabled rather than stopping outright
Beta 1 will be a more narrowly focused release and we’re hoping to ship these final breaking changes as part of it.
RTL!RTL is still coming! The PR is being reviewed by our team would like it to land in Beta 1 to ensure we can get some testing from the community.
Updating to Popper.js v2. Still on our radar, but moving slower than we anticipated due to some of the differences in the major release. See the PR for details.
Namespaced data attributes to help keep our functionality clearly separated from your own. See the PR.
Updated utilities API with pseudo-classes support via a state option. Add any space-separated list of states to get additional utilities for that pseudo-class. See the work-in-progress PR for details.
For a more up to date list of changes, be sure to follow along with the v5 Beta project board.
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.
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
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.
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.
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.
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.
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:
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.
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.
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.
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.
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.
We’re shipping our latest patch release today to fix a handful of bugs in Bootstrap 4. While our focus remains on v5’s second alpha release (coming in the next couple weeks), we want to keep v4 as stable and reliable as possible.
Our next couple releases for Bootstrap 4 will continue this trend, focusing on bug fixes, documentation improvements, and (later on) features that help bridge the gap to v5.
#30936: Add role="dialog" in modals via JavaScript
#30992: Avoid preventing input event onclick
#31155: Clear timeout before showing the toast
Build
#30797: Fix release script docs
#31011: Updated Babel config
#31296: Update to Ruby 2.7 and Bundler 2.x
Docs
#30809: Update docs callout for responsive SVG images
#30813: Mention Bootstrap Icons in extend/icons.md page
#30896: Improve wording on Downloads page
#30897: Prevent skip links from overlapping header in docs
#30973: Update some nav examples by removing .nav-item from .nav-link to be more consistent
#31070: Fix some broken examples and typos
#31135: Move color utility callouts to start of page
#31234: Clean up docs forms for accessibility
#31344: Mention toasts in the components requiring JavaScript page
Head to the v4.5 docs to see the latest in action. The full release has been published to npm and will soon appear on the BootstrapCDN and Rubygems.
Next up
We’ll be shipping our second alpha of v5 in the next few weeks. We’ve been a little delayed as we focus on ourselves during these unprecedented times and have all been taking a bit of time off here and there. We’re sorry to keep y’all waiting on v5 and hope you can understand.
After v5’s second alpha, we’ll be targeting a final alpha before our first beta, as well as more patches for v4. We’ll also be releasing the Bootstrap Icons soon. So stay tuned for more!
Today we’re shipping our fifth and final alpha release of Bootstrap Icons. After today’s alpha release, we’ll be moving onto final touch ups of existing icons, closing out some more requests, and buttoning things up for a stable v1 release. Stay tuned!
1,000+ icons
This release adds nearly 300 new glyphs, taking us right past 1,000 icons. We’ve fleshed out all our calendar icons to add ranges and events, added a suite of new phone icons, added tons of new devices and hardware icons, dozens of badges, and so much more.
As was the case with our previous alpha releases, not only do we have tons of brand new icons, but also dozens of fixes and refinements to existing ones. We’ve improved our paths to reduce icon file sizes, spending more time making things pixel perfect and with fewer vector hacks in our Figma files. In addition, we’ve updated our icon processing script to read the viewBox dimensions of each SVG individually to set their width and height. In future updates, this will allow us to create icons of various dimensions instead of our default 16x16.
New SVG sprite
In addition to hundreds of new icons, we’ve added a new bootstrap-icons.svg sprite. For those new to SVG sprites, it allows you to load a single asset and reference fragments of it across your project without inserting the entire HTML for the SVG.
Here’s a quick look at how it works once imported:
We hope to include some optimizations around this in the future as it’s our first endeavor into an SVG sprite system. Feedback and ideas are always welcome in our issues!
Coming in v1 stable
The single biggest feature coming in v1’s stable release will be icon web fonts. There’s a PR underway that requires further SVG path cleanup, as well as some tooling improvements. Overall it feels pretty promising!
While icon fonts are great for a handful of implementation reasons, please be aware that they are not inherently the most accessible option for your visitors. SVGs provide more control and styling options, and allow you to be accessible from the start with aria roles and <title>s.
If you have additional tips for how we can improve our icons, documentation, or tooling to be more accessible and approachable, don’t hesitate to share.
Beyond that, we’ll continue to clean up and improve existing icons and then aim to add a handful of new icons.
Download
Alpha 5 has been published to GitHub and npm (package name bootstrap-icons). Get your hands on it from GitHub, by updating to v1.0.0-alpha5, or by snagging the icons from Figma.
Bootstrap 5’s very first alpha has arrived! We’ve been working hard for several months to refine the work we started in v4, and while we’re feeling great about our progress, there’s still even more to do.
We’ve been focused on making the migration from v4 to v5 more approachable, but we’ve also not been afraid to step away from what’s outdated or no longer appropriate. As such, we’re very happy to say that with v5, Bootstrap no longer depends on jQuery and we’ve dropped support for Internet Explorer. We’re sharpening our focus on building tools that are more future-friendly, and while we’re not fully there yet, the promise of CSS variables, faster JavaScript, fewer dependencies, and better APIs certainly feel right to us.
Before you jump to updating, please remember v5 is now in alpha—breaking changes will continue to occur until our first beta. We haven’t finished adding or removing everything, so check for open issues and pull requests as you have questions or feedback.
Now let’s dig in with some highlights!
New look and feel
We’ve built on the improvements to our docs homepage in v4.5.0 with an updated look and feel for the rest of our docs. Our docs pages are no longer full-width to improve readability and make our site feel less app-like and more content-like. In addition, we’ve upgraded our sidebar to use expandable sections (powered by our own Collapse plugin) for faster navigation.
We’re also sporting a brand new logo! More on that when v5 goes stable, but suffice to say we wanted to give the ol’ B in a rounded square a small upgrade.
Inspired by the CSS that created the very beginnings of this project, our logo embodies the feeling of a rule set—style bounded by curly braces. We love it and think you will, too. Expect to see it roll out to v4’s documentation, our blog, and more over time as we continue to refine things and ship new releases.
jQuery and JavaScript
jQuery brought unprecedented access to complex JavaScript behaviors to millions (billions?) of people over the last decade and a half. Personally, I’m forever grateful for the empowerment and support it gave me to continue writing front-end code, learning new things, and embracing plugins from the community. Perhaps most importantly, it’s forever changed JavaScript itself, and that in itself is a monument to jQuery’s success. Thank you to every jQuery contributor and maintainer who made that possible for folks like me.
Thanks to advancement made in front-end development tools and browser support, we’re now able to drop jQuery as a dependency, but you’d never notice otherwise. This migration was a huge undertaking by @Johann-S, our primary JavaScript maintainer these days. It marks one of the largest changes to the framework in years and means projects built on Bootstrap 5 will be significantly lighter on file size and page load moving forward.
In addition to dropping jQuery, we’ve made a handful of other changes and enhancements to our JavaScript in v5 that focus on code quality and bridging the gap between v4 and v5. One of our other larger changes was dropping the bulk of our Button plugin for an HTML and CSS only approach to toggle states. Now toggle buttons are powered by checkboxes and radio buttons and are much more reliable.
Interested in helping out on Bootstrap’s JavaScript? We’re always looking for new contributors to the team to help write new plugins, review pull requests, and fix bugs. Let us know!
CSS custom properties
As mentioned, we’ve begun using CSS custom properties in Bootstrap 5 thanks to dropping support for Internet Explorer. In v4 we only included a handful of root variables for color and fonts, and now we’ve added them for a handful of components and layout options.
Take for example our .table component, where we’ve added a handful of local variables to make striped, hoverable, and active table styles easier:
We’re working to utilize the superpowers of both Sass and CSS custom properties for a more flexible system. You can read more about this in the Tables docs page and expect to see more usage in components like buttons in the near future.
Improved customizing docs
We’ve hunkered down and improved our documentation in several places, giving more explanation, removing ambiguity, and providing much more support for extending Bootstrap. It all starts with a whole new Customize section.
v5’s Customize docs expand on v4’s Theming page with more content and code snippets for building on top of Bootstrap’s source Sass files. We’ve fleshed out more content here and even provided a starter npm project for you to get started with faster and easier. It’s also available as a template repo on GitHub, so you can freely fork and go.
We’ve expanded our color palette in v5, too. With an extensive color system built-in, you can more easily customize the look and feel of your app without ever leaving the codebase. We’ve also done some work to improve color contrast, and even provided color contrast metrics in our Color docs. Hopefully, this will continue to help make Bootstrap-powered sites more accessible to folks all over.
Updated forms
In addition to the new Customize section, we’ve overhauled our Forms documentation and components. We’ve consolidated all our forms styles into a new Forms section (including the input group component) to give them the emphasis they deserve.
Alongside new docs pages, we’ve redesigned and de-duped all our form controls. In v4 we introduced an extensive suite of custom form controls—checks, radios, switches, files, and more—but those were in addition to whatever defaults each browser provided. With v5, we’ve gone fully custom.
If you’re familiar with v4’s form markup, this shouldn’t look too far off for you. With a single set of form controls and a focus on redesigning existing elements vs generating new ones via pseudo-elements, we have a much more consistent look and feel.
Every checkbox, radio, select, file, range, and more includes a custom appearance to unify the style and behavior of form controls across OS and browser. These new form controls are all built on completely semantic, standard form controls—no more superfluous markup, just form controls and labels.
We love seeing how many folks are building new and interesting CSS libraries and toolkits, challenging the way we’ve built on the web for the last decade-plus. It’s refreshing, to say the least, and affords us all an opportunity to discuss and iterate. As such, we’ve implemented a brand new utility API into Bootstrap 5.
Ever since utilities become a preferred way to build, we’ve been working to find the right balance to implement them in Bootstrap while providing control and customization. In v4, we did this with global $enable-* classes, and we’ve even carried that forward in v5. But with an API based approach, we’ve created a language and syntax in Sass to create your own utilities on the fly while also being able to modify or remove those we provide. This is all thanks to @MartijnCuppens, who also maintains the RFS project, and is responsible for the initial PR and subsequent improvements.
We think this will be a game-changer for those who build on Bootstrap via our source files, and if you haven’t built a Bootstrap-powered project that way yet, your mind will be blown.
Heads up! We’ve moved some of our former v4 utilities to a new Helpers section. These helpers are snippets of code that are longer than your usual property-value pairing for our utilities. Just our way of reorganizing things for easier naming and improved documentation.
Enhanced grid system
By design Bootstrap 5 isn’t a complete departure from v4. We wanted everyone to be able to more easily upgrade to this future version after hearing about the difficulties from the v3 to v4 upgrade path. We’ve kept the bulk of the build system in place (minus jQuery) for this reason, and we’ve also built on the existing grid system instead of replacing it with something newer and hipper.
Here’s a rundown of what’s changed in our grid:
We’ve added a new grid tier! Say hello to xxl.
.gutter classes have been replaced with .g* utilities, much like our margin/padding utilities. We’ve also added options to your grid gutter spacing that matches the spacing utilities you’re already familiar with.
Form layout options have been replaced with the new grid system.
Vertical spacing classes have been added.
Columns are no longer position: relative by default.
Here’s a quick example of how to use the new grid gutter classes:
CSS’s grid layout is increasingly ready for prime time, and while we haven’t made use of it here yet, we’re continuing to experiment and learn from it. Look to future releases of v5 to embrace it in more ways.
Docs
We switched our documentation static site generator from Jekyll to Hugo. Jekyll has long been our generator of choice given how easy it is to get up and running, and its simplicity with deploying to GitHub Pages.
Unfortunately, we’ve reached two major issues with Jekyll over the years:
Jekyll requires Ruby to be installed
Site generation was very slow
Hugo on the other hand is written in Go, so it has no external runtime dependencies, and it’s much faster. We build our current master branch site, including the doc’s Sass -> CSS in ~1.6s. Our local server reloads in milliseconds instead of 8-12 seconds, so working on the docs has become a pleasant experience again.
The Hugo switch wouldn’t have been possible without Hugo’s main developer work, Bjørn Erik Pedersen (@bep), who made quite a few codebase changes to make the transition possible and smooth!
Also a shoutout to @xhmikosr who led the charge here in converting hundreds of files and working with the Hugo developers to make sure our local development was fast, efficient, and maintainable.
Coming soon: RTL, offcanvas, and more
There’s a ton we just didn’t have time to tackle in our first alpha that’s still on the todo list for future alphas. We wanted to give them some love here so you know what’s on our radar throughout v5’s development.
RTL is coming! We’ve spiked out a PR using RTLCSS and are continuing to explore logical properties as well. Personally, I’m sorry for taking so long for us to officially tackle this knowing all the effort that’s gone into it community efforts and pull requests to the project. Hopefully, the wait is worth it.
There’s a forked version of our modal that’s implementing an offcanvas menu. We still have some work to do here to get this right without adding too much overhead, but the idea of having an offcanvas wrapper to place any sidebar-worth content—navigation, shopping cart, etc—is huge. Personally, I know we’re behind the times on this one, but it should be awesome nonetheless.
We’re evaluating a number of other changes to our codebase, including the Sass module system, increased usage of CSS custom properties, embedding SVGs in our HTML instead of our CSS, and more.
There’s a ton yet to come, including more documentation improvements, bug fixes, and quality of life changes. Be sure to review our open issues and PRs to see where you can help out by providing feedback, testing community PRs, or sharing your ideas.
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
What’s next
We still have more work to do in v5, including some breaking changes, but we’re incredibly excited about this release. Let the feedback rip and we’ll do our best to keep up with y’all. Our goal is to ship another alpha within 3-4 weeks, and likely a couple more after that. We’ll also be shipping a v4.5.1 release to fix a couple of regressions and continue to bridge the gap between v4 and v5.
@mdo
December 07, 2020
