Bootstrap 4 vs. 5 - what has changed?
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?
IE 10 and 11 support has been removed
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
- 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
$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.