Bootstrap 5 is Out! What's new in it?
Tags: bootstrap, html, css, webdev
Published: 2020-06-27 18:32:54

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](https://v5.getbootstrap.com/) 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:
```sass
.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](https://github.com/twbs/bootstrap-npm-starter).

###6- New Forms
Bootstrap 5 also updated the styling for forms. Bootstrap 5 provides fully custom styling for checkboxes, radios, select, file, etc.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8j3jwbcm3gv84vxopuhp.png)

###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.
```sass
$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](https://v5.getbootstrap.com/).

##**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
npm install --save bootstrap@5.0.0-alpha1
```
###Using CDN
```html
<!-- 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](https://twitter.com/shahmir049)