Difference between Bootstrap 4 and Bootstrap 5

What is Bootstrap?

It is an open-source framework from late 2011 that is used for designing responsive websites with a mobile-first approach faster and easier. Bootstrap is available for HTML, CSS, and JS. According to server-side languages like PHP, Node, etc bootstrap helps to design the frontend.

Why Bootstrap?

Faster and Easier
Mobile First style
It is free ! Available in www.getbootstap.com
Brower support
Responsive Design

Bootstrap 5 alpha launched in mid-June of 2020. As it is in alpha-1 version, in future some more features can be added in bootstrap 5

In alpha-1 version of bootstrap 5 some of the classes removed are:

form – row
form – inline
list – inline
card – deck

Some of added classes:

gx-* (classes control the horizontal/column gutter width)
gy-* (classes control the vertical/row gutter width)
g-* (classes control the horizontal & vertical gutter width)
rows-cols-auto

Difference between Bootstrap 4 and Bootstrap 5

BASIS OF	BOOTSTRAP 4	BOOTSTRAP 5
Grid System	It has 5 tier (xs, sm, md, lg, xl).	It has 6 tier (xs, sm, md, lg, xl, xxl).
Color	It has limited colors.	Extra colors added with improved color palette.
Jquery	It has jquery and all related plugins.	Jquery is removed and switched to vanilla JS with some working plugins
Internet Explorer	Bootstrap 4 supports both IE 10 and 11.	Bootstrap 5 doesn’t support IE 10 and 11.
Form elements	Radio buttons, checkboxes have different look in different OS and browsers.	Whether it may be any OS or browsers, the look of form elements will not change.
Utilities API	We cannot modify utilities in bootstrap 4	Bootstrap 5 gave freedom to modify and also create our own utility
Gutter	We use .glutter with fontsize in px	We use .g* with fontsize in rem
Vertical Classes	Columns can be positioned relative	Columns cannot be positioned relative
Bootstrap Icons	Bootstrap 4 doesn’t have its own SVG icons we have to font-awesome	Bootstrap 5 have its own SVG icons
Jumbotron	It supports.	It doesn’t support jumbotron.
Card deck	Card deck is used to create set of cards with equal width and height.	Card deck class in removed in bootstrap
Navbar	We have inline-block property and we will get white dropdown as default for dropdown-menu-dark class.	inline-block property is removed and we will get black dropdown as default for dropdown-menu-dark class.
Static Site Generator	Bootstrap 4 uses Jekyll software.	Bootstrap 5 uses Hugo software.

My Personal Notes

Recommended Posts: