Image
6 Reasons to Use Bootstrap 5 for better UI development

6 Reasons to Use Bootstrap 5 for better UI development

Pratikasha Shinde
October 6, 2021

Hearing the word Bootstrap a lot these days and wondering what it is? Read on to understand what Bootstrap is and how it is helpful in web designing. Websites have become an integral part of any business, big or small. What does it take to build one?

What is Bootstrap?

Bootstrap is a front-end development framework that is free and open source. Bootstrap helps in building websites and web quickly. It is the world’s most popular framework for building the responsive, mobile-first app on the web. Ideally Bootstrap saves time from writing a lot of CSS code and gives us more time to spend on designing web pages.

Boostrap4 vs Boostrap5

Boostrap4 vs Boostrap5

Versions of Bootstrap

On October 29, 2014, the initial version of Bootstrap 4 was released, and later the final version was released on January 19, 2018. It’s the successor version of Bootstrap 3. And Bootstrap 5 was released on June 16, 2020. And Bootstrap 5 is Bootstrap 4 with some new updates and changes.

Bootstrap 5 = Bootstrap 4 + New Updates with some new changes.

Let us look at the updates and changes over the years.

Based on Bootstrap 4 Bootstrap 5
Grid System It provides 5 default responsive grid tiers named as xs, sm, md, lg, xl. It provides 6 default responsive grid tiers named as xs, sm, md, lg, xl, xxl
JavaScript/jQuery It depends on jQuery and must use jQuery before using bootstrap. It uses pure Vanilla JavaScript and had removed jQuery.
Internet Explorer Support It supports IE10 and IE11 but does not support IE8 and IE9 It does not support for IE10 and IE11
Color It provides us limited colour supports. It comes with an expanded color palette.
Fonts and Font size It does not provide a default responsive font size. It gives a default Responsive font size, allowing to scale the text responsively in all viewports and devices
Form Elements Each Form Element looks different on each OS and browser e.g., radio button, dropdown, switches, checkbox etc. All Form Elements have a consistent look that is supported in all OS and browser.
Gutter It comes up with .gutter with font size in px. Default: 30 px It has introduced .g* with font size in rem. Default 2rem and has more control on gutter width.
CSS Custom Properties and Variable It does not provide any custom properties for components, layout options such as table components It gives a choice of CSS Custom Properties for components and layout options.
Vertical Spacing Classes no vertical spacing classes. Vertical classes for spacing.
Utilities API and Helpers We are not able modify Utilities classes in bootstrap. While designing projects, we can create our own set of classes and styles by using Utility API (utility classes are generated using SASS- based tools)
Positioning By default, column supports position: relative It no longer supports position for column: relative by default
Bootstrap Icon It doesn’t provide icon for the bootstrap library. It gives its own icon library. Uses SVG icons
Jumbotron Supports Jumbotron is used here. Doesn't have a Jumbotron
Card Desks It provides a card deck (Used to create a grid of card with equal height and width). No longer supports card Decks as a grid in bootstrap 5 provides more responsive control.
form-row It provides form-row classes with the small gutter. Does not have form-row classes and supports by gutter classes.

What’s new in bootstrap5?

Many things have changed with the Bootstrap 5 version compared to Bootstrap 4 after the upgrade. Let us point out the differences that you need to focus on while moving old projects or, for that matter, starting a whole new project with Bootstrap 5.

1. Vanilla JavaScript introduced except for jQuery

jQuery is the most popular JavaScript framework of all time. And we are not calling it the best for anything, and it was the best JavaScript Framework as no other framework was able to complete jQuery when bootstrap was created in 2010. So, we can say that bootstrap was created, imagining jQuery as its backbone. Yet, some developers did not like this forced dependency on jQuery. They wanted to use bootstrap with modern JavaScript frameworks like vue.js and React. Even though bootstrap 5 removed the dependency on jQuery, the dependency on JavaScript in bootstrap5. Components like dropdown, slider popover, etc. still need poppers and its vanilla JavaScript module. You can add jQuery if your project requires it, otherwise, there will not be any need for adding jQuery.

2. CSS custom properties

Apart from the SASS variables of bootstrap5 that were introduced in custom CSS properties, which eventually led to improved code reuse and clean-up bootstrap code, now CSS variables are used and accessed inside the JavaScript, so that we can make changes on CSS. Thus, we are not wholly dependent on the SASS variables for this. This is one of the significant features of bootstrap5. In bootstrap5, we can customize the CSS properties, and in Bootstrap 4, we depend on just root variables for color and fonts. E.g., in Bootstrap5, the component will use local variables to style the element. We must add bs- to all our custom properties to avoid any CSS conflicts.

For e.g
 

.styleDiv{Background-color: var(--bs-blue);font:2rem var(--bs-font-sans-serif);}

 

3. Color palette

Bootstrap 5 has given us a larger color palette. Many CSS frameworks give us extensive color palette sets and are quite popular among developers. It has many shades, like $blue-100, $blue-200, $blue-300, …., $blue-900. It gives us more options to style our project and gives us a nice look and feel.

The extended color palette gives developers the freedom to make the application look good without codebase changes. It has more than 100 color palette features. Also, Bootstrap 5 has improved color contrast, and anyone can easily override colors with their color palette using Color Shades Generator.

4. Updated form controls

In bootstrap 5, there is no need for a custom class. By default, it comes with the radio button and checkbox. Bootstrap 4 includes custom-control-label, custom-control-input, and custom-control, but with the latest bootstrap version, we don’t need any of these. Bootstrap 5 includes custom-designed Form Controls. Because of its custom design, the form controls will provide a more consistent look and feel across browsers.

 

 
    
    // radio button with custom class Bootstrap 4 
    <div class="custom-radio-field">
        <input type="radio" class="custom-field" id="test" name="test-radio">
        <label class="custom-radio-label" for="customRadioButton">Custom radio</label>
    </div>

    //Bootstrap 5 radio button
    <div class="form-check">
      <input class="form-check-input" type="radio" name=" test-radio " id="test">
      <label class="form-check-label" for="radio">Radio</label>
    </div>
    
 

 

5. Responsive Font Size (RFS)

RFS gives an idea about how it works. As the viewport gets smaller, the font-size also needs to get smaller, accordingly. Implementing this feature with the old version of bootstrap is difficult. We must write the CSS for media query and font size according to the text. Hence it is tedious. This tedious task is made easy with bootstrap 5 by offering Responsive font size.

6. Internet 10 and 11 supports

Bootstrap 5 drops its support for Internet Explorer, like the Internet Explorer, is losing its market share. And Microsoft itself is promoting the Edge browser. Microsoft’s support for IE 10 has ended in 2020 itself, and in a couple of years, even IE 11 will be declared obsolete. The Internet Explorer does not support the latest JavaScript and CSS standards, so we must compile the code from ES6 to ES5, which will increase the size of the project. These are some of the reasons for Bootstrap 5 dropping its support for IE.

Is it a good idea to move towards bootstrap5?

Using the features of Bootstrap is easy and comfortable while building our website. It saves our time when the application is built. Currently, we have Bootstrap 5 alpha version. You can either use the features of the alpha version of Bootstrap 5 for building simple websites or wait for the stable version of it, like in Bootstrap 4.

About the Author

Pratikasha Shinde, Senior Associate Engineer, Cloud ADM - Microsoft

Pratikasha is a Senior Associate Engineer who works as a UI developer in all frontend technologies. She has 3 years of experience in Front-end development, and delivery. She has designed, developed UI work for multiple client projects with SharePoint, React JS and worked for internal projects (jCorpNet).

Add New Comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.