Shahmir Faisal

Posted on Jun 27, 2020 • Edited on Jul 8, 2020

Bootstrap 5 is Out! What's new in it?

#bootstrap #html #css #webdev

Yes, you heard it right. Bootstrap 5 has released! But wait, It's in Alpha so breaking changes will continue to occur until a stable release. Anyways, It comes out with some new and exciting updates and we'll discuss them.

Major Updates

1- No Jquery

One of the exciting updates about Bootstrap 5 that I like is that It isn't using jquery anymore:). So there is no jquery. And it will make our website fast as well. And all of us know that we don't need any jquery. Vanilla Javascript got us covered. We can do anything using vanilla.js that jquery is capable of doing.

2- No Support for IE

Bootstrap 5 is not supporting Internet Explorer anymore. And it's great. I mean it's 2020 and we should use modern browsers that can support every css property(in some situations we still have to use vendor prefixes) like chrome, firefox, etc.

3- Improvements to docs

The official docs have improved. And the UI of the official bootstrap site has also updated. They’ve upgraded their sidebar to use expandable sections (powered by bootstrap collapse plugin) for faster navigation. Their docs pages are no longer full-width to improve readability and make their site feel less app-like and more content-like.

4- CSS Variables

In v4, bootstrap only included a handful of css variables for
fonts and color. But in v5, bootstrap is using css variables for components and layouts as well. Take a look at the following css variables that bootstrap 5 is using for the table:

.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...
}

5- Starter Npm Project

Bootstrap also provided a starter npm project that we can use to get up and running with bootstrap. You can get the starter project by clicking here.

6- New Forms

Bootstrap 5 also updated the styling for forms. Bootstrap 5 provides fully custom styling for checkboxes, radios, select, file, etc.

7- Utilities Api

Bootstrap 5 comes with an amazing Utilities Api. It let you create your own utility classes. Utilities are also becoming a preferred way of styling the websites like Tailwind css. So it can come in handy while building websites. Below is an example of how you can create your own utilities using this Api.

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

8- Updated Grid System

The grid system has also updated in v5. A new grid tier has added which is xxl. Just like we have .m and .p classes for margin and padding, in the same way, a new .g class has also added for grid gutters. Grid columns are no longer position: relative by default.

These are some of the major updates. To learn more about bootstrap 5 go to the official website.

How to use it?

Just like we use bootstrap 4, in the same way, we can also use bootstrap 5 as well.

Using NPM

npm install --save bootstrap@5.0.0-alpha1

Using CDN

<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<!-- JavaScript and dependencies -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>

Conclusion

Bootstrap 5 comes with a lot of great updates and you should definitely give it a shot. However, remember that it's in alpha so breaking changes will continue to occur. So don't use it for a production-ready application. Try to use it for personal or small projects. So that's it. I hope you learn something from this article. Take care.

If you want to connect with me follow me on twitter

DEV Community