Bootstrap 5 alpha arrived, What’s new and things you need to know about it?

Wow..!! The Bootstrap 5 alpha version has been officially released by date June 16, 2020. 🤩

You can check here the official page and documentation for Bootstrap 5 alpha.

We provide selected high quality, modern design, professional and easy-to-use Free Bootstrap Admin Dashboard Templates, HTML Themes, and UI Kits to create your applications faster.

You can check some of our Bootstrap admin templates.

Now, let’s get started.😎

So, what’s new in Bootstrap 5 alpha?🔥

Yeah, the wait is over 🤘. Bootstrap 5 alpha is here, and surely you might be curious to know about the changes in it? Right? 🧐

Well, here we will discuss all the major changes and updates in detail.

As we discussed in the previous blog on the Bootstrap 5 release date, Bootstrap 5 has officially dropped jQuery and support for Internet Explorer 10 & 11. There are some other major changes, too. For that, there will be a Bootstrap 5 tutorial very soon.

Here are some great changes and features of Bootstrap 5 alpha:

Bootstrap 5 Alpha offers some exciting new features such as:

  • A custom SVG icon library
  • New responsive font
  • New utilities & helpers
  • Lighter package
  • Easier customization & theming
  • An expanded color palette and many more.

Apart from this, there are some upcoming features, too.

  • RTL support
  • Offcanvas menu
  • Upgraded codebase, including the Sass module system.
  • Increased usage of CSS custom properties and more.
Major changes include in Bootstrap 5 alpha are:
  1. New look and feel
  2. Dropping jQuery in favor of vanilla JavaScript
  3. Enhanced grid system
  4. Improved customizing docs
  5. Adding a custom set of SVG icons
  6. Adding CSS custom properties
  7. Improved Utilities API
  8. Updated forms
  9. Responsive Font Sizes
  10. Migrating the documentation from Jekyll to Hugo
  11. Dropping support for IE10 and IE11
1. New Look and Idea behind it

Well, the first thing that attracted the most is, the new logo and upgraded homepage.  It represents freshness and uniqueness.🤩

Bootstrap team has made some fresh improvements on the homepage in v5.0.0. That gives an updated look and a new feel. Docs pages are no longer full-width, which improved readability. In addition, there is an upgrade in the sidebar to use expandable sections (powered by Collapse plugin) for faster navigation.

According to the developers behind the framework,

“Inspired by the CSS that created the very beginnings of this project, our logo embodies the feeling of a rule set—style bounded by curly braces. We love it and think you will, too. Expect to see it roll out to v4’s documentation, our blog, and moreover time as we continue to refine things and ship new releases.”

Bootstrap team

 

2. Dropping jQuery

As we all know, Bootstrap has made this decision long before. The team had opened a pull request in 2017 aiming to remove Jquery entirely from bootstrap versions, and now in bootstrap 5 alpha it is done and replaced entirely with vanilla Javascript.

Well, there’s been a hike in popularity of JavaScript frameworks like Vue, Angular, and React in the web development community, while jQuery is considered dreaded now. As most of these modern frameworks don’t work on DOM directly,  instead, they work through virtual DOM. Which leads to much faster performance.

So, dropping jQuery as a dependency is a huge improvement in terms of making the CSS framework lighter and faster. jQuery has been an invaluable library in the beginnings of front-end development because of the lack of querying in vanilla Javascript.

As we all know, JavaScript is now dominating the modern web development community. 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.

Furthermore, vanilla JS offers most of the jQuery’s features. Hence there’s no reason to keep it around.

We will write a guide in the coming days on how to migrate from Bootstrap 4 to version 5 and replace old jQuery code with updated vanilla JS. So, if you are interested then subscribe to our newsletter.😉

3. Enhanced grid system

Well,  Bootstrap 5 alpha isn’t a complete departure from v4. Developers of the first alpha have made sure that everyone can be able to upgrade to this future version more easily. As there were some difficulties in upgrading from the v3 to v4 upgrade path, developers have kept the bulk of the build system in place (minus jQuery) for it, 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 new in the grid system:

  • New grid tier. xxl ≥1400px
  • .gutter classes have been replaced with .g* utilities.
  • Vertical spacing classes.
  • Columns are no longer position: relative by default.
  • Form layout options are replaced with the new grid system.
  • Also, options for your grid gutter spacing are added.

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>
 
4. Improved customizing docs

There are some good improvisations in the documentation. Like, removing ambiguity,  giving more explanation, and providing much more support for extending Bootstrap. It all starts with a whole new Customize section.

Furthermore, there is more content here. Also, there is a starter npm project for you to get started with faster and easier. It’s also available as a template repo on GitHub, so you can freely fork and go.

The color palette is expanded in v5, too. With an extensive color system built-in, you can more easily customize the look and feel of your app without leaving the codebase. There is an improvisation in color contrast, too.

Also, they have provided color contrast metrics in Color docs. Hopefully, this will continue to help make Bootstrap-powered sites more accessible to folks all over.

5. Adding a custom set of SVG icons

With Bootstrap 3, there were 250 reusable icon components in the font format called ‘Glyphicons”.  After that, with Bootstrap 4, it was totally scrapped. Because of that developers had to rely on free icon fonts or their own SVG (Scalable Vector Graphic) icons to add value to their web designs. However, with Bootstrap 5 alpha, they introduced a brand new SVG icon library, which adds a fresh touch. These icons are brilliantly crafted by @Mark Otto, co-founder of Bootstrap, himself.

6. Adding CSS custom properties

As mentioned, Bootstrap 5 alpha has begun using CSS custom properties thanks to dropping support for Internet Explorer. In v4 there were only a handful of root variables for color and fonts, and now developers have added them for a handful of components and layout options.

For example table component, there are 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...
}
7. Improved Utilities API

Well, this is by far the most interesting aspect of Bootstrap 5 alpha.  A brand new utility API.

By using the utility API from Bootstrap you have unlimited possibilities to create utility classes for positioning, spacing, sizing, and so on.

For example, you will be able to easily expand the number of `m-*`, `p-*` classes, and so on without writing custom Sass code to expand them. Here’s an example showing us how the $ utility variable can be expanded by adding multiple values:


$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);

Ever since utilities become a preferred way to build. Developers of Bootstrap 5 alpha has been working to find the right balance to implement them in Bootstrap while providing control and customization. They have carried global $enable-* classes forward in v5 as they did wit v4.

With an API based approach, they’ve created a language and syntax in Sass. So that developers can create their own utilities on the fly while also being able to modify or remove. This is all thanks to @MartijnCuppens, who also maintains the RFS project, and is responsible for the initial PR and subsequent improvements.

We think this will be a game-changer for those who build on Bootstrap via source files, and if you haven’t built a Bootstrap-powered project that way yet, your mind will be blown.

8. Updated Forms

In addition to the new Customize section, developers of bootstrap 5 alpha have overhauled Forms documentation and components.  They have combined all forms styles into a new Forms section (including the input group component).

Alongside new docs pages, all form controls are redesigned and de-duped. In v4 they made an extensive suite of custom form controls—checks, radios, switches, files, and more—but with v5, it is now fully custom.

Well, designing a responsive website that works well across multiple platforms or view-ports is quite challenging for some developers. Media queries have been a great tool to solve typography common problems. It allows developers to control the appearance of typographies on web pages by specifying specific font sizes for the typography elements on a specific view port.

Bootstrap 5 alpha enables responsive font sizes by default. That will automatically resize the typography element according to the size of the user’s viewport through RFS engine or Responsive Font Sizes.

As per RFS repository, RFS is a unit resizing engine. Furthermore, RFS offers the ability to resize basically every value for any CSS property with units, like padding, margin, box-shadow, or border-radius.

Basically, RFS is a pre-processor mechanism. It automatically calculates the appropriate font-size values based on the user’s screen size or viewport. Besides, It works on known preprocessors or postprocessor tools such as Sass, Less, Stylus, or PostCSS.

10.Switching from Jekyll to Hugo

If you know how WordPress, Drupal, or Joomla works, then, you might be aware of how Jekyll works. Well, Jekyll is a free and open-source static site generator. Besides, it is useful to build websites with easy to use navigation, website components, and generates all the content at once.

However, Bootstrap 5 alpha is all set to step up its game and is switched to Hugo.  As it is a fast and flexible static site generator.

Furthermore, it uses Go language which makes it super-fast, Configure, and easy to use. Well, Hugo’s feature may seem the same as Jekyll. But what makes it different is, it can organize your content with any URL structure and has great integration with the popular web host.

11.Dropping support for IE 10 and 11

Well, Internet Explorer was talk of the town when it was released as it was the only browser to support Java applets and CSS.

Although it is no longer relevant with Chrome, Firefox, and Edge as it doesn’t support modern JavaScript standards and CSS properties anymore. Which limits your web design potential. Hence, Bootstrap 5 alpha decided to drop the support for IE 10 and 11.

Thus, developers and designers will be able to focus more on designing modern web pages without having to worry about increasing the size of every project or breaking any piece of code on old browsers.

What’s next?

Well, the bootstrap team is still going to bring other changes. Some are in progress already. We can expect great improvements as they have always given, in order to make it easy and preferable for developers.

Bootstrap 5 is already planning to release another major Alpha before getting into a bit more stable beta ships. Furthermore, they have still a lot to do before setting things up like a lot of improvements in their major components like the navbar flexible variants, utilities, and accessibility.

Alpha 2, Alpha 3, Beta and Stable versions are ongoing. In Alpha 2; 41 tasks are completed, 5 are in progress, and 51 are in the to-do list by date 25/6/2020, so we can expect Alpha 2 release soon.

They have done major changes till now and there are some in the pipeline. The version is yet not stable completely.  As per the source, the stable version of alpha will be released by the end of this year.

After the successful completion, they are going to review all of their documentation, and update all the existing templates to the latest one with improvements. After that, they’ll go with the testing phase by testing current changes and reporting bugs. Until then,  enjoy their latest updates with Alpha 5.

Here are some reactions:
Conclusion

So,  In this article, We have given a detailed and comprehensive overview of some major updates and things that you might need to know before starting with Bootstrap 5 alpha.

You’ll surely find this article helpful.

Well, The release of Bootstrap 5 alpha was talk of the town in the community of website designers and developers. It is very useful to develop responsive and mobile-first projects. Furthermore, It will improve the development and designing experience. Also, it will make huge changes to the existing mainframe.

Apart from the mentioned changes, there are yet many more to come like more documentation improvements, bug fixes, and quality of life changes.

With the all-new updates that came with Bootstrap 5 Alpha, We can surely say that the Bootstrap team is making very progressive steps to make the framework simple, lightweight, faster, useful, and more responsive for the developer’s benefit.

If you love bootstrap admin templates then have look at Chameleon Bootstrap admin template.

Do share your views and share this article with your colleagues and developer community, with attributes. 👍

 

Related Posts

 

By Signin or Signup to ThemeSelection.com using social accounts or login/register form, You are agreeing to our Terms & Conditions and Privacy Policy

Looking for more Freebies ! 

Get notified 💌 about upcoming Free Bootstrap Themes,
Unique promo codes  and Sales ! 🥳
SUBSCRIBE NOW
We promise not to spam you. You can unsubscribe at any time.
10% Off when you use promo code 10PERCENTOFF and complete your order today!
close-image
Privacy Preferences
When you visit our website, it may store information through your browser from specific services, usually in form of cookies. Here you can change your privacy preferences. Please note that blocking some types of cookies may impact your experience on our website and the services we offer.