1.
Bootstrap 5
What's New
SANDUN PERERA
GEVEO AUSTRALASIA PVT LTD
12/08/2020

2.
TOPICS
• jQuery was removed
• Switch to Vanilla JavaScript
• Responsive Font Sizes
• Drop Internet Explorer 10 and 11 support
• Change of gutter width unit of measurement
• Removed Card Decks
• Navbar Optimization
• Switching from Jekyll to Hugo
• Class updates
• Custom SVG icon library
• Icons
• Bootstrap migration

3.
JQUERY WAS REMOVED
While Bootstrap has been using jQuery for more than 8 years, jQuery has become quite a large and bloated framework that requires websites
using it to download and add trivial load time for a library that may not be used by any other plugin except Bootstrap itself.
As JavaScript frameworks like Angular, Vue and React dominate the web development community nowadays, jQuery has been losing its popularity
as most of these modern frameworks work through the virtual DOM and not on the DOM directly that leads to much faster performance. Although
it might sound absurd, it turns out it is much more proficient and anyone using these frameworks will have better control and maintenance over
their code than those who use jQuery.
Still want to use jQuery? It’s possible!
Bootstrap 5 is designed to be used without jQuery, but it’s still possible to use our components with jQuery. If Bootstrap detects jQuery in
the window object it’ll add all of our components in jQuery’s plugin system; this means, you’ll be able to do $('[data-
toggle="tooltip"]').tooltip() to enable tooltips. The same goes for our other components.

4.
SWITCH TO VANILLA JAVASCRIPT
JavaScript is the programming language of the web. Most modern websites are powered by JavaScript and all modern web browsers on
desktops, consoles, tablets, games and mobile phones include JavaScript interpreters, which makes JavaScript the most universal
programming language in the world.
The removal of jQuery support in Bootstrap 5 gives way to writing efficient vanilla JavaScript code without worrying about the size or
adding up any other non-essential functions. While jQuery has been around for a long time, it is completely impossible to use jQuery
alone because for the most part, what jQuery does is add a $ object to the global scope, with a lot of functions in it. Even more slick
libraries like prototype are not an alternative to JavaScript but exist only as extra tools to solve common problems.
If you know how JavaScript works from the root, this major change won’t affect you much but for some developers who only know how
to use jQuery, this might be a good chance to learn the language.

5.
RESPONSIVE FONT SIZES
Media queries have been a great tool to solve typography common problems that allow
developers to control the appearance of typographies on web pages by specifying specific
font sizes for the typography elements on a specific viewport.
Bootstrap 5 will enable responsive font sizes by default which automatically resize the
element according to the size of the viewport through Responsive Font Sizes.
According to RFS repository, RFS is a unit resizing engine which was originally developed to
resize font sizes. RFS offers the ability to resize basically every value for any CSS property
with units, like margin, padding, border-radius or box-shadow.
It is a pre-processor or postprocessor-powered-mechanism that automatically calculates the
appropriate font-size values based on the user’s screen size or viewport. It works on known
pre-processors or postprocessor tools such as Sass, Less, Stylus or PostCSS.
As an example, assuming that you have a hero-title class which is a class for your h1 tag
element that you want to use for your main title on the hero section. Using Sass the
following mixin will do the trick:
.hero-title {
@include font-size(4rem);
}
.hero-title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.hero-title {
font-size: 4rem;
}
}

6.
DROP INTERNET EXPLORER 10 AND 11 SUPPORT
In 1995, Microsoft released the Internet Explorer which blew everyone’s mind because for the first time there was a
browser that supported CSS and Java applets that made it one of the most widely used web browsers back in 2003 with
95% usage share.
Fast forward to 2020, Internet Explorer is no longer relevant with Chrome, Firefox, and Edge. In fact, it became one of the
web designer’s nightmares since it doesn’t support modern JavaScript standards. In order to work with Internet Explorer,
be it 10 or 11, JavaScript codes need to be compiled to ES5 instead of ES6, which increases the size of your projects up to
30%. This obviously limits your ability to use the features of ES6 or newer JavaScript standards. What’s even worse is it
doesn’t support a lot of modern CSS properties which limits your modern web design potential.
In Bootstrap 5, the Bootstrap team decided to drop the support for Internet Explorer 10 and 11.

7.
CHANGE OF GUTTER WIDTH UNIT OF MEASUREMENT
CSS offers ways to specify sizes or lengths of elements using various units of measurement
such as px, em, rem, % vw, and vh. While pixels or px is widely known and used for its
absolute units, relative to DPI and resolution of the viewing device, it does not change
based on any other element which is not good for modern responsive web design.
Bootstrap has been using px for its gutter width for quite a long time which will no longer
be the case in Bootstrap 5. According to the fixes made on Bootstrap 5’s official GitHub
project tracking board, the gutter width will now be on rem instead of px.
Rem stands for “root em” which means equal to the calculated value of font-size on the
root element. For instance, 1 rem is equal to the font size of the HTML element (most
browsers have a default value of 16px).

8.
REMOVED CARD DECKS
In Bootstrap 4, for you to be able to set equal width and height
cards that aren’t attached to one another, you need to use card
decks as shown below.
In Bootstrap 5, the Bootstrap team removed the card decks since
the new grid system offers more responsive control. Hence,
removing unnecessary extra classes that can be solved via grid.
<div class=”card-deck”>
<div class=”card”>
<img class=”card-img-top” src=”…” alt=”Card image cap”>
<div class=”card-body”>
<h5 class=”card-title”>Card title</h5>
<p class=”card-text”>This is a longer card with supporting text below as a natural...</p>
<p class=”card-text”><small class=”text-muted”>Last updated 3 mins ago</small></p>
</div>
</div>
<div class=”card”>
<img class=”card-img-top” src=”…” alt=”Card image cap”>
<div class=”card-body”>
<h5 class=”card-title”>Card title</h5>
<p class=”card-text”>This card has supporting text below as a natural lead-in...</p>
<p class=”card-text”><small class=”text-muted”>Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div class="row g-5">
<div class="col">...</div>
<div class="col">...</div>
<div class="col">...</div>
</div>

9.
NAVBAR OPTIMIZATION
The Bootstrap navbar component is a principal part of Bootstrap that gets used all the time. In previous versions of Bootstrap, you need
to have a decent amount of markup in order to make it work. However, in Bootstrap 4 they simplified this using a nav or div HTML
element and unordered list. The navbar class is the default class that always needs to appear on the component.
By default, Bootstrap 4 uses inline-block on its display option but in Bootstrap 5, it was removed. They also used flex shorthand and
removed the brand margin caused by requiring containers in navbars. Aside from this, they have also implemented a dark dropdown
via dropdown-menu-dark class that turns the dropdown into a black background which we usually see on navbar dropdown items.

10.
SWITCHING FROM JEKYLL TO HUGO
Jekyll is a free and open-source static site generator. If you know how WordPress, Joomla
or Drupal works, then, you probably have an idea of how it works. Jekyll is used to build
websites with easy to use navigation, website components and generates all the content
at once. Jekyll basically provides page templates such as navigation and footers that will
reflect on all the web pages. These templates are merged with other files with definite
information (for instance, a file for each blog post on your website) to generate full HTML
pages for website users to see.
Bootstrap 4 has been a great tool to integrate with Jekyll through Sass (Syntactically
Awesome Style Sheets) but in Bootstrap 5, a major switch from Jekyll to Hugo
is anticipated.
Hugo is described as “A Fast and Flexible Static Site Generator built with love by spf13 in
GoLang”. Similar to Jekyll, it is a static site generator but written in Go language. A
possible reason for the switch is that Hugo is lightning fast, easy to use and configurable.
Compared with Jekyll, it has a great integration with the popular web host and can
organize your content with any URL structure.

11.
CLASS UPDATES
Of course, Bootstrap 5 will not be interesting without the new Bootstrap CSS
class. Bootstrap 4 has more than 1,500 CSS classes. There will be some CSS class
that will no longer be available in the new version and some CSS class that will
be added.
Some of the CSS classes that are already removed, according to the Bootstrap
5’s official Github project tracking board are:
• form-row
• form-inline
• list-inline
• card-deck
Here are some new Bootstrap 5 CSS class added:
• gx-* classes control the horizontal/column gutter width
• gy-* classes control the vertical/row gutter width
• g-* classes control the horizontal & vertical gutter width
• row-cols-auto

12.
CUSTOM SVG ICON LIBRARY
In version 3 of Bootstrap, there are 250 reusable icon components in
the font format called “Glyphicons” created to provide iconography to
input groups, alert, dropdowns and to other useful
Bootstrap components.
However, in Bootstrap 4 it was totally scrapped, and web designers and
developers need to rely on free icon fonts like Font Awesome or use
their own custom SVG icons in order to add value to their web design.
In Bootstrap 5, there’s a brand new SVG icon library crafted carefully
by Mark Otto, co-founder of Bootstrap. Before the official release of
Bootstrap 5, these icons can now be added and used to your project at
this moment of time. You can visit this page to learn more.

13.
ICONS
Coming soon (Currently v1.0.0-alpha5)
https://icons.getbootstrap.com/
Alternatives
• Font Awesome
• Feather
• Octicons

14.
BOOTSTRAP MIGRATION
http://upgrade-bootstrap.bootply.com/
https://getbootstrap.com/docs/4.0/migration/

15.
REFERENCES
• https://designmodo.com/bootstrap-5/
• https://v5.getbootstrap.com/

16.
QUESTIONS

17.
thank-you