Bootstrap 4 vs. 5 - what has changed?
Tags
CSS
Frontend
Bootstrap
Share
Vissza

Bootstrap 4 vs. 5 - what has changed?

Benjámin Békefi

Bootstrap, the most popular CSS framework, has received a new version. The latest version 5 was officially released on May 5, 2021, and the previous version 4.6 was finalized on January 18, 2018. Version 5 has a lot of new features for web developers, let’s see what.

 

News in brief, what has changed?

 

Vanilla JavaScript instead of jQuery

Bootstrap has used jQuery since its release, but version 5 already uses vanilla JavaScript. This makes new JavaScript frameworks like React and Vue.js work much more easily with Bootstrap.

 

IE 10 and 11 support has been removed

The Bootstrap team has decided to discontinue support for Internet Explorer due to its small market share and because the browser does not support the latest, modern JavaScript and CSS standards. Thus, it can provide users with modern features like CSS variables, faster JavaScript and enhanced APIs.

 

Icons and fonts

Icons are an important part of the user interface of websites and applications. In Bootstrap 4 we need to use external files, FontAwesome, flaticons or our own icons. Bootstrap 5 got its own built-in SVG-based icons. These icons were developed by Figma, exported in SVG format, and look great.

 

New classes, new colors, new grid system

Bootstrap 5 retains the structure introduced in Bootstrap 4 and adds new classes to it. Here are the news:

  • New xxl grid level (>1400px)
  • Gutter classes can be used by adding .g*
  • New grid system and custom controls for forms
  • Vertical distance classes
  • The columns no longer receive a fundamentally relative position

Many CSS frameworks, such as Tailwind, offer a wide range of colors that developers really like. Bootstrap has 5 expanded color palettes, you can use more colors and more shades, such as $100-blue, $200-blue, $300-blue, …, $blue-900. We can overwrite these colors with our own color palette if we feel like it.

Bootstrap 5 introduced an experimental version of the CSS Grid that replaces the default grid system. Its use is optional, but anyone who likes it has the option.

 

Which one should I choose? Which one is better?

Here are some reasons to stick to Bootstrap 4 in current projects:

  • The project is already using version 4 of Bootstrap.
  • The project requires support for IE 10 and IE 11.
  • The project uses jQuery and does not need the new features of Bootstrap 5.

And the reasons why Bootstrap 5 is recommended for new projects:

  • Use Bootstrap jQuery free in addition to React or Vue.js.
  • New features of Bootstrap, such as an expanded color palette or an improved grid system, etc.
Contact