Bootstrap 5 has officially landed! After three alphas, three betas, and several months of hard work, we’re shipping the first stable release of our new major version. It’s been a wild ride made possible by our maintainers and the amazing community that uses and contributes to Bootstrap.

What’s New in Bootstrap 5 for Web Developers?

As with any major version change, a lot has changed in Bootstrap 5 over Bootstrap 4. Here is the list of major differences you need to keep in mind when updating old projects or starting a new project with Bootstrap 5.


1. Vanilla JavaScript instead of jQuery


Ever since Bootstrap was introduced, it utilized jQuery as a dependency to offer dynamic features such as menu expansion, carousel, dropdowns etc. However, this forced dependency on jQuery was not liked by many developers who wanted to use Bootstrap with modern JavaScript frameworks such as React and Vue.js. With Bootstrap 5, they have removed this dependency.


Note that this does not mean that there is no JavaScript dependency in Bootstrap 5. Behaviors such as dropdown, slider, popover etc. in Bootstrap 5 depends on Popper as well as its own vanilla JavaScript module. There will be no requirement of adding jQuery. If your project depends on jQuery, you can still add it.


2. Browser support – IE 10 and 11 support removed


With Microsoft moving its efforts completely towards Edge browser, Internet Explorer is fast losing market share. Moreover, Edge has adopted the open source chromium engine which allows it to have all the modern JavaScript and CSS features on par with latest version of Chrome and Firefox. Given this, Bootstrap team has dropped support for Internet Explorer which allows it to provide a modern set of features such as CSS variables, faster JavaScript and better APIs.


Here is a full list of browsers that Bootstrap 5 no longer supports:



  • Dropped Microsoft Edge Legacy

  • Dropped Internet Explorer 10 and 11

  • Dropped Firefox < 60

  • Dropped Safari < 10

  • Dropped iOS Safari < 10

  • Dropped Chrome < 60

  • Dropped Android < 6


3. CSS custom properties


Thanks to dropping support for Internet Explorer, Bootstrap 5 now supports custom CSS properties. In Bootstrap 4 root variables were present for only color and fonts. Bootstrap 5 now offers CSS variables in a handful of components and layout options. For example, table component makes use of local variables to make striped, hover-able, and active table styles easier.


.table { --bs-table-bg: #{$table-bg}; --bs-table-accent-bg: transparent; --bs-table-striped-color: #{$table-striped-color}; --bs-table-striped-bg: #{$table-striped-bg}; --bs-table-active-color: #{$table-active-color}; --bs-table-active-bg: #{$table-active-bg}; --bs-table-hover-color: #{$table-hover-color}; --bs-table-hover-bg: #{$table-hover-bg}; // Styles here... }



4. Expanded color palette


Many CSS frameworks such as Tailwind offer an extensive set of color palette which has been quite popular with developers. Bootstrap 5 has now expanded its color palette to include more colors that are present in different shades such as $blue-100, $blue-200, $blue-300, …., $blue-900. This allows you to easily customize the look and feel of your app without ever leaving the codebase. You can easily override these colors with your own color palette using the color shades generator.


5. Updated Form Controls


Bootstrap 5 includes custom designed form controls. In Bootstrap 4 the form controls were using whatever defaults each browser provided. In Bootstrap 5 the form controls will offer much more consistent look and feel in all browsers due to its custom design.


Bootstrap5 form controls

These new form controls are all built on completely semantic, standard form controls and thus there is no need of adding extra markups for form controls and labels.


<div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"> <label class="form-check-label" for="flexCheckDefault"> Default checkbox </label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"> <label class="form-check-label" for="flexRadioDefault1"> Default radio </label> </div> <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault"> <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label> </div>



6. Utilities API


A new utility API has been built into Bootstrap 5. You can use Sass to create your own utilities. You can also use the utility API of Bootstrap to modify or remove the default utility classes.


"width": ( property: width, class: w, values: ( 25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto ) ),

You can also now use the state option to generate pseudo-class variations such as :hover and :focus. An example:


$utilities: ( "opacity": ( property: opacity, class: opacity, state: hover, values: ( 0: 0, 25: .25, 50: .5, 75: .75, 100: 1, ) ) );



CSS utility classes that get generated with above:


.opacity-0-hover:hover { opacity: 0; } .opacity-25-hover:hover { opacity: .25; } .opacity-50-hover:hover { opacity: .5; } .opacity-75-hover:hover { opacity: .75; } .opacity-100-hover:hover { opacity: 1; }

7. Enhanced grid system


While Bootstrap 5 keeps the grid system structure that was introduced in Bootstrap 4, it enhances it by adding new classes. This would mean less effort will be required to move the grid structure from the older to newer version.


Here is the what changed in the Bootstrap 5 grid system:



  • New xxl grid tier.

  • Gutter classes can be added in grid using .g* utilities.

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


8. New offcanvas component


A new offcanvas component has been added in Bootstrap 5 which can be used to create expanding sidebars for navigation or for shopping carts or offcanvas menu. These offcanvas components can be placed on the left, right, or bottom of the viewport and can be configured with data attributes or the JavaScript APIs.


9. New accordion


Bootstrap 5 adds support for brand new .accordion component. The new accordion includes Bootstrap Icons as chevron icons indicating state and click-ability. You can also use .accordion-flush to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container.


Bootstrap accordion

10. Floating labels in Form Inputs


A new floating label support has also been added in bootstrap 5. This behavior is similar to the behavior shown by many material design UI frameworks such as MDB. Form validation styles also work as expected with floating labels present.


Bootstrap floating labels

Our Vertical Experience for Boostrap 5 Development
Connecting Intelligence, Data, Concepts, Applications & Ultimately People

Frequently Asked Questions

Will you replace my Current UI UX Design if I’m not satisfied?
Every UI UX design we create, we do it with our experience and expertise. However, in case it seems there are issues pertaining to your UI UX design, we guarantee new revision and sample immediately ensuring the reason for change is addressed in your new UI UX Designs.
What is the main pain-point of the current version (if it exists) in UI/UX?
If you redesign a website or application, find out the shortcomings of the current product, and focus on improving the product in the redesign process. You can also ensure that these features are fully covered in your research and user testing process.
How does your UI/UX designer estimate the timeline in the design process?
Our UI/UX designer takes into accountability of number of pages needed to be designed & developed for your application. He/She then estimate number of hours needed to design each page and hence give you exact timeline.
How do you think of the questions on the 'difference of UI/ UX design?'
Answers are different from people to people, each designer has his own understandings, “UX is not equal to the UI”, “UX design emphasis on technology and analysis, UI design closer to the graphic design.”
I Have my own developer, Do you just do UI UX Design for Mobile Apps?
Yes, we will closely work with your development until your development cycle completes and we will provide full support in UI UX Designs for your Mobile Application Development.
UI / UX - Web Stories!
Let's Work Collectively!
Get a Free Quote now in just 1 Hour!
Call us / WhatsApp us / Email Us now at
Connecting Intelligence, Data, Concepts, Applications & Ultimately People.
Let's Print!

We are committed to serve you and add value to your business.