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

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.

JQuery is losing its popularity because lot’s of new JavaScript frameworks like ReactJs, AngualrJs, Vue.Js takeover the market. Additionally many of jQuery’s querying features can be done by just writing vanilla Javascript query selector nowadays.

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.

3. Switch to Vanilla JavaScript

You now how JavaScript takeover the market. Almost all modern web browsers on consoles, desktops, games, tablets, and mobile phones include JavaScript interpreters.

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.

We are living in fast forward Internet, and Internet Explorer doesn’t support modern JavaScript standards browser like Chrome, Opera, Firefox, Safari etc. It limits your web design potential, therefore, Bootstrap 5 decided to drop the support for IE 10 and 11. 

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:

• Card-deck
• form-inline
• form-row
• list-inline

And some of the latest CSS classes with the new version are-

• row-cols-auto
• 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.

Conclusion

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.

Also see:

• 25 Bad Programming Habits You should Quit Right Now
• 20 Best Chinese Apps Alternative