Bootstrap is a popular design framework in Web World. If you are a web developer you definitely heard about it. Now, bootstrap officially released Bootstrap 5 alpha. Let’s see what’s new in Bootstrap 5.
Here are some major changes.
- 1. JQuery removed
- 2. Moving from Jekyll to Hugo
- 4. IE 10 and 11 support removed
- 5. Card decks removed
- 6. Navbar optimization
- 7. Responsive font sizes
- 8. SVG icon library
- 9. Class updates
- 10. Change Gutter Width Unit of Measurement
- 11. Improved bootstrap branch for development
1. JQuery removed
JQuery is a classic web scripting with its general-purpose abstraction layer and is efficient in almost any web development requirement.
Bootstrap has been using JQuery for more than 8 years now, and now it has become quite a large and bloated framework. Due to this, websites need to download and add trivial load time for its library that may not be used by any plugin other than Bootstrap itself.
Removing this dependency will lighten the project’s size considerably.
2. Moving from Jekyll to Hugo
Jekyll is an open-source static site generator, which is used to build websites with easy-to-use navigation and website components.
So, now Bootstrap moving in Hugo as it is described as a fast and flexible static site generator.
Therefore, it is written in Go language which makes it lightning fast, easy to use and configure.
Although Hugo’s feature may seem identical to Jenkyll, however, Hugo has great integration with the popular web host and can also organize your content with any URL structure.
Therefore, it is all set to become the universal scripting standard of the world. As a result, this will improve the size and weight of the files and libraries used by the framework.
4. IE 10 and 11 support removed
Microsoft released Internet Explorer in 1995 and it was a big hit as it was the only browser to support CSS and Java applets.
As a result, it will encourage web designers and developers to focus more on designing modern web pages rather than having to worry about breaking any piece of codes on old browsers. Considering this, it is a pretty good move in interest of developers and designers.
5. Card decks removed
In Bootstrap 4, in order 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.
<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 lead-in to additional content. This content is a little bit longer.</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 to additional content.</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 is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class=”card-text”><small class=”text-muted”>Last updated 3 mins ago</small></p> </div> </div> </div>
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.
6. Navbar optimization
With Bootstrap 5, they optimized their navbar component by removing it. Now, they use a dark dropdown via dropdown-menu-dark class which turns the dropdown menu into a black background which we usually see on the navbar dropdown items.
7. Responsive font sizes
Typography attracts the user and make UX better. So, No doubt, it can be challenging for the developers to design a website that looks good across multiple viewports or platforms.
One of the great tools to solve typography is Media queries that allows designers and developers to control the appearance of typography across multiple viewpoints.
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.
8. 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.
9. Class updates
Bootstrap 4 has more than 1,500 CSS classes, however, Version 5 is introducing a new Bootstrap CSS class.
In addition, some classes will no longer be available in the new version, and CSS class will be added. Some of the removed CSS classes according to the Github project tracking board are:
And some of the latest CSS classes with the new version are-
- g-* classes control the horizontal and vertical gutter width
- gy-* classes control the vertical/row gutter width
- gx-* classes control the horizontal/row gutter width
10. Change 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 are considered to be 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.
However, with Bootstrap 5, the gutter width will now be measured using rem instead of px. Rem is an abbreviation used for ‘root em’ that means equals to the calculated value of font-size on the root element. For example, 1 rem is equivalent to the font size of html element and it just makes more sense. You can check out best Bootstrap editors.
11. Improved bootstrap branch for development
Master will become Bootstrap 5’s new V3 dev branch according to the official announcement by the website. Therefore, in order to develop v5 they will cut a new master branch from v4-dev.
Bootstrap always saves my ass as a web developer. Because I’m frustrating with my design. I never get satisfied with my design at once. So, these types of frameworks always save my time. So, yes Bootstrap 5 is here, and now its time to make your website more beautiful and eye-catching.