Bootstrap 5 What’s new and things you need to know

Wow..!! The Bootstrap 5 beta 1 version has been officially released by date December 7, 2020. 💥 🤩 In this article on Bootstrap 5 What’s new and things you need to know about it, you’ll get the details and important things to keep in check

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

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.  You can also check Bootstrap 5 Cheatsheet.

Now, let’s get started.😎

**Update**:
Bootstrap 5 Beta 1 is out now…!!✨

 

What it has brought?

Well, 1st of all RTL!— It has been added in this release, and they’ve come with some important changes. Awesome isn’t it…!!?🤩

At a high level, the RTL approach includes a handful of changes:

  • New RTL versions of CSS dist file, which includes grid, Reboot, utilities, and standard bundles.
  • New RTL documentation to help you get started.
  • Five new RTL Examples that show new RTL CSS in action, converting Album, Checkout, Carousel, Blog, and Dashboard examples into all-new right-to-left equivalents.
  • Two new cheatsheet kitchen sink pages—the default cheatsheet for standard CSS and the RTL cheatsheet.

This will helps reprocess an existing LTR stylesheet for RTL.  Check out the Contents page for a full list of files, documentation, including required HTML changes, a starter template, details on their approach, and more.

There are some other significant changes as listed below:

  • Renamed classes for logical properties
  • Upgraded Popper.js from v1.x to v2.x
  • Renamed alldata attributes to include bs as an infix
  • JS enhancements
  • Breaking: Renamed scale-color() function to shift-color() . See #32149.
  • Breaking: Simplified the make-container() mixin and $container-padding-xSee #31735.
  • Fixed: Corners remain rounded now in vertical button groups. See #31303.
  • Fixed: Removed default linear gradient on some table rows that caused undesirable performance. Still more work to do here FYI. See #32277.
  • Updated: Breadcrumbs now have a simplified appearance. Use utilities to restore the paddingbackground-color, and border-radius as desired. See #32249.
  • Updated: Finalized browsers list configuration to match our supported browsers. See #30986.
Some updates in detail:

Namespaced data attributes:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

States in the utility API:

One of the biggest new features of Bootstrap 5 beta 1 is utility API, an extensible way to customize, add, or remove Bootstrap utilities.

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Which outputs to:

.opacity-0-hover:hover { opacity: 0; }
.opacity-25-hover:hover { opacity: .25; }
.opacity-50-hover:hover { opacity: .5; }
.opacity-75-hover:hover { opacity: .75; }
.opacity-100-hover:hover { opacity: 1; }

For a more complete list of changes, check out the official site for Bootstrap 5, v5 Beta project board, or a list of issues and PRs in this release.

Popper.js v2

Another major update is upgraded Popper.js from v1.x to v2.x, with some small breaking changes to the tooltips and popovers.

  • Removed offset option from Tooltip/Popover and Dropdown plugins; this can still be achieved using the popperConfig parameter.
  • The fallbackPlacement option has become fallbackPlacements.

Popper.js v2 also comes with a smaller file size for our primary dependency, updated positioning calculations, and much more. Beyond that, our tooltips and popovers are unchanged and just as powerful.

Bootstrap 5 Beta 1 Features:

Besides the updates mentioned above,  bootstra 5 beta 1 came alongwith refreshed docs and some amazing icons sets as follow:

New social icons

New media icons

Icon fonts

Now, there will be two web font formats—.woff and .woff2. Also, it offers an HTML index of all icons in web font format, powered by a generated CSS file.

Refreshed docs

Icons of Figma

Bootstrap 5: What’s new and things you need to know…🔥

Well, above was the details about the latest Beta 1 version. Before the beta 1 version, Bootstrap 5 alpha was released on June 16, 2020. Here we have discussed 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.

 

Bootstrap 5 Alpha offered 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.

  • Offcanvas menu
  • Upgraded codebase, including the Sass module system.
  • Increased usage of CSS custom properties and more.
Major changes included in Bootstrap 5 alpha were:
  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.

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 the 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 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 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 the RFS engine or Responsive Font Sizes.

As per the 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’s. 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 beta 1 has already arrived. 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, is released.

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.

More JavaScript updates are coming soon, from performance and file-size improvements to new features.

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 beta 1.

Conclusion

So,  In this article on Bootstrap 5 What’s new and things you need to know, 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.

Well, The release of Bootstrap 5 alpha was the talk of the town in the community of website designers and developers. And now they have released bootstrap 5. 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 and Bootstrap 5 Beta 1, 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 the Chameleon Bootstrap admin template.

Do share your views and share this article: Bootstrap 5 What’s new 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.