Bootstrap 5 alpha - The first UI Kit for the latest Twitter’s Bootstrap 5

  • img
    Sijo Varghese
  • November 23,2020

What is Bootstrap?

Bootstrap is the most popular free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS and JavaScript-based design templates for typography, forms, buttons, navigation and other interface components.

Journey

Initially, after launching Bootstrap, they launched its 2nd version after 2 years, and then version 3 after a year of launching V2. However, it took them 5 long years to introduce version 4. And now the alpha version of the much-awaited Bootstrap 5 framework was released on 16th June 2020.

Source: Wappalyzer tracks over 5,017,000 websites that use Bootstrap.

Bootstrap 5 alpha has been officially released with some of the most important changes being removing jQuery as a dependency, dropping support for IE 10 and 11 and generally improving the markup and stylesheets for the most popular CSS framework in the world.
Although it’s still just an alpha version and using Bootstrap 5 in production may be risky due to unforeseen bugs, it might be a good idea to start working around with the new version of the framework and more importantly, if you’ve been accustomed to using jQuery this change may make you consider using Vanilla JS by default.

Download Newest Version of Bootstrap 5:
https://mdbootstrap.com/docs/standard/bootstrap-5/

Download Material Design for Bootstrap 5:
https://mdbootstrap.com/docs/standard/

Major changes included with the Bootstrap 5 alpha framework:

2. Bootstrap 5 alpha no longer depends on jQuery

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax which is efficient in almost any web development requirement. Bootstrap has been using JQuery for more than 8 years but now; it has become quite a large and distended framework. Due to this, websites need to download and increase loading time for their library. In 2017, the Bootstrap team opened a pull request with the aim to remove jQuery entirely from the Bootstrap and they replaced with vanilla JavaScript. GitHub incrementally removed jQuery from their front-end mainly because of the rapid evolution of web standards and jQuery losing its relevancy over time. Due to the trend of writing Single Page App with Angular, Vue, React JS and so on jQuery has not been popular anymore. The bootstrap team has removed jQuery from 11 plugins including Util, Alert, Button, Carousel, and more. Using ‘Data’ and ‘EventHandler’ in unit tests are no longer supported.

Note: But! If you’ d like to keep using jQuery — it will still work!
The downside would be — well… still using jQuery!! Of course it makes coding quicker, but you’ll need to include it in your app which will makes it slower and heavier.
As a UI Kit with copy-paste approach we have no doubts that dropping jQuery is a step forward and we recommend you to utilize it.

3. CSS custom properties added

In v4 they only included a handful of root variables for color and fonts, and now they added them for a handful of components and layout options. Take for example our .table component, where they have added a handful of local variables to make striped, hoverable, and active table styles easier :

    table {
          --bs-table-bg: #{$table-bg};
          --bs-table-accent-bg: transparent;
          --bs-table-striped-color: #{$table-striped-color};
          --bs-table-striped-bg: #{$table-striped-bg};
          --bs-table-active-color: #{$table-active-color};
          --bs-table-active-bg: #{$table-active-bg};
          --bs-table-hover-color: #{$table-hover-color};
          --bs-table-hover-bg: #{$table-hover-bg};
             // Styles here...
    

4. Enhanced Utilities API

They implemented a brand new utility API into Bootstrap 5.

        $utilities: () !default;
        $utilities: map-merge(
               (
                 // ...
                 "width": (
                  property: width,
                  class: w,
                   values: (
                    25: 25%,
                    50: 50%,
                    75: 75%,
                    100: 100%,
                    auto: auto
                )
        ),
        // ...
          "margin": (
           responsive: true,
           property: margin,
           class: m,
           values: map-merge($spacers, (auto: auto))
        ),
           // ...
        ), $utilities);

    

API based approach, they created a language and syntax in Sass to create our own utilities on the fly while also being able to modify or remove.

5. Better Grid System

Example of how to use the new grid gutter classes:

```html

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

```

6. Switched 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 of your 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.

7. Switched to Vanilla JavaScript

Vanilla JS is a name to refer to using plain JavaScript without any additional libraries like jQuery. Vanilla JS is the most lightweight framework available anywhere. The modern web development community is dominated by JavaScript. Almost 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.

8. Responsive font sizes

Bootstrap 5 will enable responsive font sizes by default. It was one of the challenging part for the developers and we use multiple media queries to control the appearance of typography across multiple viewpoints.

Bootstrap’s side project RFS is a unit resizing engine which was initially developed to resize font sizes (hence its abbreviation for Responsive Font Sizes). Nowadays RFS is capable of rescaling most CSS properties with unit values like margin, padding, border-radius, or even box-shadow.

9. IE 10 and 11 support removed

This may be bad news for some of the enterprise developers, who focus on all platforms. However, fast forward to 2020, Internet Explorer is no longer relevant with Chrome, Firefox, and Edge as it doesn’t support modern JavaScript standards. So they focus on developers to build modern web pages rather than having to worry about breaking any piece of codes on old browsers.

10. Custom set of SVG Icons added

For Bootstrap 5, they introduced a brand new SVG icon library crafted brilliantly by Mark Otto, co-founder of Bootstrap. They scale quickly and easily and can be styled with CSS. They're open-sourced (MIT), so you're free to download, use, and extend.

11. Improved customizing docs

They expanded the theming page with more content and code snippets for building on top of Bootstrap’s source Sass files. They also expanded the color palette in v5. Extensive color system built-in for a more customized look and feel without ever leaving the codebase.

12. Updated forms

Created a new Forms section (including the input group component). With v5, they have gone fully custom.
With a single set of form controls and a focus on redesigning existing elements vs generating new ones via pseudo-elements which gives a more consistent look and feel.

Removal of .form-row and .form-inline
.form-rows* had a smaller gutter width, but since we now have the gutter classes, we can use them for even more control over the gutter widths.
.form-inline is removed in favor of the more flexible grid. The children can now be wrapped in .col-md-auto div's when needed. With the gutter classes, we can have easier control over the vertical spacing instead of using the responsive margin utilities.

      <div class="form-check">
         <input class="form-check-input" type="checkbox" value="” id="flexCheckDefault">
        <label class="form-check-label" for="flexCheckDefault">
           Default checkbox
        </label>
	</div>
	<div class="form-check">
 		<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
 		<label class="form-check-label" for="flexRadioDefault1">
			Default radio
 		</label>
	</div>
	<div class="form-check form-switch">
   <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
        <label class="form-check-label" for="flexSwitchCheckDefault">
            Default switch checkbox input
         </label>
	</div>

Every checkbox, radio, select, file, range, and more includes a custom appearance to unify the style and behavior of form controls across OS and browser.

13. Responsive Containers

Currently, Bootstrap was providing two options of the Container a regular container and container-fluid In Bootstrap 5, we've got some new options for the container such as .container-sm, .container-md and more. Responsive containers will be 100% width until they get specified breakpoints.

How to start Bootstrap Project ?

Let’s start creating our website by creating a folder where we are going to place it, and inside that folder, let’s create an index.html file.
After opening our index.html file in your favorite code editor, let’s set the basic HTML file structure and all needed CDNs.


<!DOCTYPE>
<html>
  <head>
    <title>Bootstrap-5 example</title>
    <!-- CSS only -->
    <link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
    <link rel="stylesheet" href="./styles.css">
    <!-- JavaScript and dependencies -->
    <script      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
  </head>
  <body>
		//contents
  </body>
</html>

Ok, when that’s ready, let’s create one more file for the custom styles. Let’s call it styles.css, and let’s place it in the same folder.

let’s go through the crucial design decisions that they made and why:

Breathing life into colors

Being subtle is not always the right path. Designers in the 90’s seemed to understand it, but somewhere along the way the internet got so wrapped up in toning down the color pallet that everything became a little bit more grey and sad.

Take a look at the difference between the colors below

The most important aspect is that they not only look more “alive” but also make a difference when it comes to accessibility. Just take a look at the button groups below — buttons using the new colors are more visible and “eye-catching”.

Let's wait. Even the ripple/waves effect is more visible thanks to higher saturation, and therefore gives better feedback for the user.

Letting the user feel a click

There’s nothing more important in web design that letting the user now what’s going on. Most of the confusion, rage and impatience that your visitor feels originates when the user doesn’t get enough visual feedback.
For example a common practice is using loaders when your app needs a little bit more time to process. Of course, there’s no real function for them other then letting the users know that “something is happening”.

In this spirit, we decided to double down on feedback and focus on making it stand out. The best example of that would be the checkbox component. Check out the difference between a standard Bootstrap checkbox that indicates the click mainly by color change, and a Material Bootstrap checkbox that adds a bigger animation indicating the clickable area and making the action hard to miss.

When Bootstrap 5 release date?

Bootstrap 5 first alpha was officially released on June 16, 2020. Bootstrap 5 alpha 2 was released on September 29, 2020. Not sure which day is certain, but with the workload completed, Bootstrap 5 to be released in late spring this year.

Conclusion

The new Bootstrap 5 makes the framework lightweight, simple, useful, and faster for the developer’s benefit. They are having ready-made designs, coded templates, and themes for projects. Bootstrap 5 can help you get the best in industry to benefit your business.


Subscribe to newsletter
Need more tech news? Tune in to our weekly newsletter to get the latest updates