Features |
Bootstrap 4 version |
Bootstrap 5 version |
Released date |
Bootstrap 4 was released in January 2018, and it marked a significant advance over previous versions. |
Bootstrap 5 was released in May 2021. This version came after multiple iterations of alpha and beta releases, and as a result, it had a slew of important additions and new features. |
Links |
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> |
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet">
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"> </script> |
Grid System |
Bootstrap 4 has five levels: xs, sm, md, lg, and xl. |
Bootstrap 5 has six levels: xs, sm, md, lg, xl, and xxl. |
Jquery plug-in |
Bootstrap 4 includes jquery and all associated plug-ins. |
Jquery has been deleted and replaced with vanilla JS and several functional plug-ins in Bootstrap 5. |
Color |
Bootstrap 4 provides a few colors for a web page. |
Extra colors insert into the looks, and the card's color palette was upgraded. There are a variety of colors to pick from the Bootstrap 5 framework. |
Internet explorer |
Bootstrap 4 is compatible with both Internet Explorer 10 and 11. |
Bootstrap 5 does not support Internet Explorer 10 and 11. |
Elements of Form |
Radio buttons and checkboxes appear differently in different operating systems and browsers. The form takes advantage of whatever basic browser features are available. |
The appearance of form elements will not change while using a different operating system or browser. The forms alternate and add form controls; they are not browser-dependent. |
API for Utilities |
We are unable to alter utilities in Bootstrap 4. |
Bootstrap 5 provided us the ability to tweak and develop our utility. |
Utilize a gutter. |
Bootstrap 4 uses glutter in a px font size. |
Use .g* with font size set to rem in bootstrap 5. |
Vertical Groups |
Columns can be positioned relative to one another. |
Columns cannot be positioned relative to one another. |
Icons for Bootstrap |
Bootstrap 4 lacks SVG icons; we must rely on font-awesome for icons. |
Bootstrap 5 has its own set of SVG icons. |
Jumbotron |
Bootstrap 4 compatible with jumbotron. |
It is not compatible with jumbotron. |
deck of cards |
The card deck is used to make an isset of cards with the same width and height. |
The card deck class has been removed from bootstrap. |
Navbar |
We have the inline-block attribute, and the white dropdown will be the default for the dropdown-menu-dark class. |
The inline-block property has been removed, and the dropdown-menu-dark class now has a black dropdown as the default. |
Generator of Static Websites |
Bootstrap 4 makes use of the Jekyll software. |
Bootstrap 5 uses a fast static generator which is Hugo. |
grid flexbox |
It makes vertical designs easier to construct, and columns and rows can be simply implemented. The justify-center-content classes use directly to align according to the requirement. |
A more complex grid system is offered, and columns do not have relative locations. |
CSS usability |
Bootstrap 4 uses fewer CSS properties. |
Bootstrap 4 uses more CSS properties. |
offcanvas component |
There is no off-canvas element. |
The offcanvas component is now available. |
RTL support |
Languages do not enable RTL (right to the left) switching. |
It enables RTL (right to the left) language switching. |