Site Color

Text Color

Ad Color

Text Color

Evergreen

Duotone

Mysterious

Classic

Sign Up to Save Your Colors

or

Bootstrap 5 Basics by@thatIITGirl

Bootstrap 5 Basics

image
thatIITGirl Hacker Noon profile picture

thatIITGirl

Node js developer

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.

image

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.

image

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.

image

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. ;)

image

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.

image

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.

image

Enjoy!

Tags