Difference between Bootstrap 3 and 4

Grid Layout :

• In bootstrap 3 we use lg-col-1, 2, 3,4, .., 12 for columns but in bootstrap 4 we use only col bootstrap 4 automatically detect the number of columns in a row ….. (feature, I like from both is Bootstrap 4 ✔️)

Navbar:

• In 3 we are 2 colors or navbar given by default one is navbar-default and other is navbar-inverse. The inverse was black color but now in 4 no need to give inverse we just need to type navbar-dark, info, danger, secondary, ….(bootstrap 4✔️)
• Another thing I noted is that in Bootstrap 3 there was a slide icon for nav responsive but is now removed in bootstrap 4
  …. (like bootstrap 3 ✔️)

Padding and Margin :

• In 3 we need to add padding and margin through style tag but now we can write pt-1, 2, 3,4 5, for the top padding and MB-1, 2, 3, 4,5 for the bottom margin
  ….(bootstrap 4✔️)

Panel to Card:

• In bootstrap 3 some panels are now changed into cards in bootstrap 4. Cards have card-img, card-body …. Card-title, card-text but in panels, there are panel-heading, panel-body, panel-footer
  ….(bootstrap 4✔️)

Colors:

• Some Custom colors are added in bootstrap 4 like bg-dark, bg-secondary, bg-light Similarly to text color as well. These are not in bootstrap 3
  ….(bootstrap 4✔️)

Spinners:

• These are not in bootstrap 3. This is a loading icon.
  ….(bootstrap 4✔️)

Tables:

• Dark color introduced in 4
  ….(bootstrap 4✔️)

Captions:

• Captions on images are removed in bootstrap 4 at the thumbnail of the image.
  …(bootstrap 3✔️)

Positioning :

• Float left, right and mx-auto d-block introduced which is not in 3
  ….(bootstrap 4✔️)

Custom form :

• Ui of radio button, a checkbox is improved through custom form
  ….(bootstrap 4✔️)

Toast:

• Toast introduced in bootstrap 4
  ….(bootstrap 4✔️)

Carousel :

• Carousel is improved, indicator is round before and rectangular after
  ….(bootstrap 4✔️)

Toggle Switch :

• New introduce
  ….(bootstrap 4✔️)

Icons:

• Gliphicons is replaced by Font Awesome icons
  ….(bootstrap 4✔️)

**Some Others Introduce:**
Modal, Popover, Scrollspy, Utilities, Flex

….(bootstrap 4✔️)

JQuery Script is minimized in bootstrap 4 which is a very healthy act

These are some of the differences made in bootstrap 4 from bootstrap 3

You can get access of GitHub Repository for code :

https://github.com/ZapeeoSheikh/Bootstrap-4-Tutorial

For more information:

https://opensenselabs.com/blog/tech/bootstrap-3-or-bootstrap-4

Show some ❤️ by Staring some repositories at GitHub ✨