Bootstrap 5 vs Bootstrap 4 – What’s New & What Changed?

The team behind the most popular CSS framework Bootstrap has released a new version. As of writing this article, Bootstrap 5 alpha is out and available for use. Let us see what are these new introduced features in Bootstrap 5 and what has changed over earlier version Bootstrap 4.

bootstrap5
New Logo for Bootstrap

While there are many under the hood changes such as a new logo for Bootstrap, move to Hugo from Jekyll, we will touch upon those aspects first that affect web development projects most.

What’s New in Bootstrap 5 for Developers

As with any major version change, a lot has changed in Bootstrap 5 over Bootstrap 4. Here is the list of major changes you need to keep in mind when updating old project 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. 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.

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
      )
    ),

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. Easier customization & theming

Bootstrap 5 offers a new Customize section which expands on v4’s theming page with more content and code snippets for building on top of Bootstrap’s source Sass files. A npm starter project is also provided to help you get started with customizing Bootstrap faster.

9. SVG Icon Library

Bootstrap now offers SVG library of 1,000+ icons that are easy to integrate in your code. You can add these icons by inline code or SVG sprite. A web font version will also be introduced with the stable release of this icon library. We have been using this icon library in our current projects (including Bootstrap 4) and have found it to be quite extensive.

Boostrap icons library
Bootstrap Icons

10. Better Documentation

You will also notice a new look and feel to the Bootstrap 5 documentation site which has been revamped to improve readability. Sidebar in documentation now uses expandable sections for faster navigation.

11. Hugo over Jekyll for site generation

Bootstrap’s documentation site has adopted Hugo over Jekyll for its static site generation. Hugo is a popular and fast cross platform static site generator written in Go. You can learn about top static site generators here.

12. New Logo

Lastly, Bootstrap 5 now sports a brand-new logo (attached at the start of the article).

Bootstrap 5 vs Bootstrap 4 – Should you switch?

Here are some reasons why you would want to stick to Bootstrap 4 in your current projects:

  • Your project needs support for IE 10 and IE 11.
  • Your project is dependent on jQuery and you don’t need new features of Bootstrap 5.
  • Bootstrap 5 is still in alpha and you want to wait till the stable version is released.

And here are the reasons why you would want to switch over to Bootstrap 5 in your new projects or update your older ones:

  • You are using React or Vue.js and want to use Bootstrap without the dependency on jQuery.
  • You want to utilize the new features of Bootstrap such as expanded color palette, enhanced grid system, custom utilities etc.

As for me, I will keep using Bootstrap 4 in my existing projects till the stable version is released. For new web projects, I will start using Bootstrap 5 to make use of the new features. Once the stable version is released, I will upgrade my existing projects to move to the newer version. Checkout Bootstrap templates by our team.

Bootstrap 5 UI Kit – MDB

As with Bootstrap 5 announcement, MDB has released the Material Design UI Kit for Bootstrap 5. There are many material design frameworks, however MDB has been one of the most promising one built with Bootstrap and offers extensive design, frequent updates as well as professional support.

MDB5

MDB – Material Design UI Kit with Bootstrap

MDB 5 is built with latest Bootstrap 5 and Material Design 2.0. It offers 500+ material UI components, detailed docs, multiple practical examples as well as pre-made templates. It is MIT license and is free for personal & commercial use. Learn more about MDB.

Kanishk Kunal

Kanishk is a Software Engineer turned Online Entrepreneur who has created many successful apps and websites. He devotes most of his time punching his keyboard and swiping his smartphone. Follow him on Twitter @kanishkkunal

Leave a Reply