DEV Community

Cover image for Bootstrap 5 new features, dropped features and alpha release date
Sandeep K
Sandeep K

Posted on

Bootstrap 5 new features, dropped features and alpha release date

Bootstrap is one of the most popular CSS framework which probably would have been used or come across by every web developer. Bootstrap 5 is going to be released soon. Let's see what is new in it and more about it.

Bootstrap, originally named Twitter Blueprint, was first developed for use by Twitter for its internal tools. On August 2011 this was renamed to Bootstrap and released to market as an open source project. It has large contributors base. It is licensed under MIT.

Bootstrap 4 is the current stable version released on January 2018 (it's alpha release was on August 2015, beta release on August 2017). Currently it is undergoing a major update as Bootstrap 5 which supports Material Design.

Bootstrap 5 alpha version was officially released on June 16,2020. You can checkout their official Github repostitory for issues, open questions, feedback and pull requests. There is no news from their end on its stable release till now.

Let us see what are the new features that are the added and also features dropped in Bootstrap 5

  • Dropped JQuery support and switched to Vanilla JavaScript
  • Font sizes will also be responsive
  • Grid system improved with change in gutter width unit measurement
  • No Card Decks
  • Navbar Optimisation
  • Dropped support for IE 10 and 11
  • Introduced own custom SVG icons library
  • Switching from Jekyll to Hugo
  • Updated Classes

Drop JQuery support and switch to Vanilla JavaScript

JQuery is an efficient language for web scripting which allows you to access all elements in a page update its appearance and content, responds to user inputs etc.. across all browser platforms. AJAX is one of the popular feature to refresh just the content you need. Bootstrap has been using JQuery from past 8 years, it has become a large bloated framework which should be downloaded on websites that uses Bootstrap framework and may not be used by other plugins. Hence this overhead was removed and furher querying feature will have to be done with Vanilla JavaScript.

Responsive Font Sizes

This is one of my favorite feature which bootstrap added to its new version. Until Bootsrap 4 though the website elements and grids acts as responsive to different screen sizes, there was no native support by Bootstrap for fonts also to be responsive.

This feature is enabled by default in Bootstrap 5 as per users viewport through RFS Engine. RFS is a unit resizing engine which was originally developed to resize font sizes. RFS offers the ability to resize basically every value for any CSS property with units, like margin, padding, border-radius or box-shadow.

Grid system improved with change in gutter width unit measurement

Until Bootstrap 4 the grid system uses "px" or "pixels" as a unit of measurement to measure the length/size of elements, this measurement relative to DPI and resolution of the viewing device and does not change based on any other element which does not suit for modern responsive design.

In Bootstrap 5 the gutter width measurement is 'rem' instead of 'px'. Rem stands for (root em). In most browsers 1rem default value is 16px.

No Card Decks

The card-deck class which is used to to set equal width and height to cards is removed as the new grid system offers more responsive control.

Navbar Optimisation

By default, Bootstrap 4 uses inline-block on its display option but in Bootstrap 5, it was removed. They also used flex shorthand and removed the brand margin caused by requiring containers in navbars.

Dropped support for IE 10 and 11

The drawback with this browser versions are they don't support modern JavaScript standards. Hence, for developers to make their application compatible with this browser the code size increases considerably. To overcome this difficulty Bootstrap team decided to drop their support for these browsers.

Introduced own custom SVG icons library

In Bootstrap 3 developers got the advantage of 'Glyphicons' to use in their projects, but in Bootstrap 4 it was removed and hence developers need to rely on free icons like FontAwesome or Custom SVG icons.

Hurray! Bootstrap 5 there is well crafted new SVG icon library by Mark Otto, co-founder of Bootstrap.

Alt Text

Switching from Jekyll to Hugo

Jekyll is a free open-source static site generator which was a great combination with Bootstrap until version 4. In Bootstrap 5 this functionality is switched to Hugo, because Hugo is lightning fast, easy to use and configurable. Hugo is also a static site generator built on Go language.

Updated Classes

Bootstrap functionality is entirely depends on classes of elements. Bootstrap 4 has around 1500 CSS classes. In Bootstrap 5 some classes wer reomved and some new classes were added.

Here are some classes that are no longer supported in Boostrap5

  • form-row
  • form-inline
  • list-inline
  • card-deck
    Also see some new classes coming in Bootstrap 5

  • gx-* classes control the horizontal/column gutter width

  • gy-* classes control the vertical/row gutter width

  • g-* classes control the horizontal & vertical gutter width

  • row-cols-auto

Conclusion

No doubt Bootstrap 5 is going to be a lighweight, simple, useful and faster CSS framework for the developers benefit.

Top comments (0)