Bootstrap 5 : what’s new in bootstrap 5 new releases Part-1

Bootstrap 5 : what’s new in bootstrap 5 new releases Part-1

Bootstrap, the most popular front-end framework built to design modern, responsive, and dynamic interfaces for professional design web pages, is currently undertaking a major update, Bootstrap 5.

Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic layout websites and web applications. Being a tool for creating front-end design, it consists of a series of HTML- and CSS-based design templates for different components of a website or application such as forms, buttons, navigation, modals, typography and other interface components with helpful JavaScript extensions. It doesn’t matter if you are a beginner to web development or an experienced developer, Bootstrap is a powerful tool for whatever type of website and web application you are trying to build.

What is new in bootstrap 5??

  • jQuery was removed
  • Switch to Vanilla JavaScript
  • Drop Internet Explorer 10 and 11 support
  • Improved grid system
  • Improved documentation
  • Improved modularity
  • Improved forms
  • New responsive font
  • New utilities & helpers
  • Easier customization & theming
  • Lighter package
  • New API available

1.What is new inside?

As far as components are concerned there are no major changes, however implementation changed drastically. New Bootstrap is much better organized, it's modular and easily customizable. And foremost - it's much easier to learn and use for developers.

2.jQuery isn't required anymore (however you can still use jQuery methods if you wish)

 jQuery is a library that offers a general-purpose abstraction layer for classic web scripting that is efficient in almost any web development requirements. Its extensible nature allows you to access elements in a document without writing a lot of JavaScript, modify the appearance of your content in a web page which developers take advantage of to bridge the gap across all browsers, change the content of a document, respond to a user’s interaction, retrieve information from a server without refreshing a page through AJAX, add animation to your web page, simplify common JavaScript tasks and the list goes on.
    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.
    Moving forward, any jQuery querying features will have to be done with pure or vanilla JavaScript code in Bootstrap 5 which will help with the file size or weight of the framework.

3.Dropped support for Internet Explorer

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 which is a pretty good move as it will enable web designers and developers focus more on designing modern web pages without having to worry about breaking any piece of codes on old browsers or increasing the size of every project.

4.Switched 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.Improved Grid System

By design Bootstrap 5 isn’t a complete departure from v4. They wanted everyone to be able to more easily upgrade to this future version after hearing about the difficulties from the v3 to v4 upgrade path. They have kept the bulk of the build system in place (minus jQuery) for this reason, and They have also built on the existing grid system instead of replacing it with something newer and hipper.

Here’s a rundown of what’s changed in grid:

  • They’ve added a new grid tier! Say hello to xxl.
  • .gutter classes have been replaced with .g* utilities, much like our margin/padding utilities. They’ve also added options to your grid gutter spacing that matches the spacing utilities you’re already familiar with.
  • Form layout options have been replaced with the new grid system.
  • Vertical spacing classes have been added.
  • Columns are no longer position: relative by default.

Here’s a quick example of how to use the new grid gutter classes:

<div class="row g-5">
  <div class="col">...</div>
  <div class="col">...</div>
  <div class="col">...</div>
</div>

Take a look at the redesigned and restructured Layout docs to learn more.

CSS’s grid layout is increasingly ready for prime time, and while They haven’t made use of it here yet, They’re continuing to experiment and learn from it. Look to future releases of v5 to embrace it in more ways.

6.Improved Documentation

They switched documentation static site generator from Jekyll to Hugo. Jekyll has long been our generator of choice given how easy it is to get up and running, and its simplicity with deploying to GitHub Pages.

Unfortunately, They’ve reached two major issues with Jekyll over the years:

  1. Jekyll requires Ruby to be installed
  2. Site generation was very slow

Hugo on the other hand is written in Go, so it has no external runtime dependencies, and it’s much faster. They build our current master branch site, including the doc’s Sass -> CSS in ~1.6s.local server reloads in milliseconds instead of 8-12 seconds, so working on the docs has become a pleasant experience again.

The Hugo switch wouldn’t have been possible without Hugo’s main developer work, Bjørn Erik Pedersen (@bep), who made quite a few codebase changes to make the transition possible and smooth!

Also a shoutout to @xhmikosr who led the charge here in converting hundreds of files and working with the Hugo developers to make sure our local development was fast, efficient, and maintainable.

Continue Reading... Click Here

Also Read:

Chines app list: Clean your mobile Now

Post Comments(0)

Leave a reply