Skip to content
Related Articles

Related Articles

Improve Article

Difference between Bootstrap 4 and Bootstrap 5

  • Difficulty Level : Easy
  • Last Updated : 02 Jun, 2021

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 on www.getbootstrap.com
  • Browser support
  • Responsive Design 

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

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



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

Some of the 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 OFBOOTSTRAP 4BOOTSTRAP 5
Grid SystemIt has 5 tier (xs, sm, md, lg, xl).It has 6 tier (xs, sm, md, lg, xl, xxl).
ColorIt has limited colors.Extra colors added with the looks,,A cardimproved color palette.
JqueryIt has jquery and all related plugins.Jquery is removed and switched to vanilla JS with some working plugins
Internet ExplorerBootstrap 4 supports both IE 10 and 11.Bootstrap 5 doesn’t support IE 10 and 11.
Form elementsRadio buttons, checkboxes have different look in different OS and browsers.The look of form elements will not change, on different OS or browser.
Utilities APIWe cannot modify utilities in bootstrap 4Bootstrap 5 gave freedom to modify and also create our own utility
GutterWe use .glutter with fontsize in pxWe use .g* with fontsize in rem
Vertical ClassesColumns can be positioned relativeColumns cannot be positioned relative
Bootstrap IconsBootstrap 4 doesn’t have its own SVG icons we have to font-awesomeBootstrap 5 have its own SVG icons
JumbotronIt supports.It doesn’t support jumbotron.
Card deckThe card deck is used to create an isset of cards with equal width and height.Card deck class in removed in bootstrap
NavbarWe 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 GeneratorBootstrap 4 uses Jekyll software.Bootstrap 5 uses Hugo software.

 

My Personal Notes arrow_drop_up
Recommended Articles
Page :