Bootstrap 5 Basics

Written by thatIITGirl | Published 2020/07/06
Tech Story Tags: bootstrap | bootstrapping-for-beginners | web-development | react | mean-stack | coding | html | frontend | web-monetization

TLDR The world’s most popular open-source framework used by developers with HTML, CSS, and JavaScript is ready to roll out the new release - Bootstrap 5 anytime soon! Here are the major changes expected with the new updated version. No more Jquery is expected with so many more advanced substitutes like React, Vue, etc, Jquery. Responsive Font Sizes or RFS engine will enable responsive font sizes by default. Gutter width unit of measurement will have the gutter width be measured using rem instead of px.via the TL;DR App

The world’s most popular open-source framework used by developers with HTML, CSS, and JavaScript is ready to roll out the new release - Bootstrap 5 anytime soon!
Here are the major changes expected with the new updated version.

No more Jquery

Yes, its 2020 and with so many more advanced substitutes like React, Vue, etc, Jquery is removed.

Responsive font sizes

Bootstrap 5 will enable responsive font sizes by default. Now, it will be easier to resize the typography components according to the user’s viewport through Responsive Font Sizes or RFS engine.

SVG icon library

In bootstrap-3, we had Glyphicons, then they were removed with bootstrap-4, so we had to rely on third parties. Now, it has an inbuilt SVG library called brilliantly by Mark Otto for making it a bit easier.

Card decks removed

Bootstrap-4 had bulky code for cards creation to set equal width and height cards that aren’t attached to one another, Now, we have more of a responsive control with its new grid system.

Switching from Jekyll to Hugo

Bootstrap 5 is switching to Hugo, written in Go language for faster and flexible static site generator, though both have identical features, Go is making it lightning fast. ;)

Changed Gutter width unit of measurement

Bootstrap 5 will have the gutter width be measured using rem instead of px. As Px does not change based on any other element thus not good for modern responsive web design. So rem is the new standard, 1 rem is equal to the font size of the HTML element.

Classes Update

Out of the 1500 something classes from Bootstrap-4, few are removed like form-inline, Card-deck, form-row, and few are added eg, row-cols-auto, g-*, gx-* (classes control the horizontal/row gutter width), gy-*.

No Support for IE10 or IE11

C'mon, we are in 2020.
Enjoy!

Written by thatIITGirl | Node js developer
Published by HackerNoon on 2020/07/06