What's new in Bootstrap 5?

web
mobile

Topic: What's new in Bootstrap 5?
Published 19.11.2019 Updated 05.12.2019

Bartłomiej Malanowski pro premium posted 3 weeks ago

Bootstrap won the hearts of many developers and it's hard to be surprised - it provides a lot of useful solutions such as components and utilities and the great grid system. As a developer, I often find its influences on other frameworks and it's a huge compliment that confirms how powerful Bootstrap it is.

At the beginning of the year (or maybe earlier), Bootstrap's creators started a new project called Bootstrap 5. Initially, this was just a couple of issues on GitHub which was described with a message "don't get too excited", but I started to follow BS5 and a few months ago I've noticed that it's happening. That's why I've decided to say some words about its upcoming release - Bootstrap 5

If you think that Bootstrap 5 will be delivered in the nearest future, you're wrong, but it's worth to wait. By browsing its TODO list, I've found that many of the problems that were pissing me off in the past, will be covered with the official solutions. Here's what's exactly changed

Dropped jQuery

jQuery was (and still is!) a revolutionary technology that helped millions of developers to write cross-browser code easily, but after were invented solutions such as Angular, React or Vue.js, jQuery found out to wasn't enough to compete with them. Bootstrap 5 is 100% jQuery-free and every component was rewritten to vanilla JS. This will help to integrate it with more JavaScript frameworks. However, Bootstrap 5 still can be used with jQuery.

Responsive Containers

Currently, Bootstrap was providing two options of the container - a regular container or 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. That was something that - in my opinion - Bootstrap needed.

Using as a module

Bootstrap 5 introduced its ESM version which allows using it as a module (if your browser supports it). Example:

<script type="module">
  import { Toast } from 'bootstrap.esm.min.js'


  Array.from(document.querySelectorAll('.toast'))
    .forEach(toastNode => new Toast(toastNode))
</script>

Refreshed website

Till now, Bootstrap's website is hosted on GitHub Pages with a little help from Jekyll. Bootstrap 5 will be hosted on Netlify which provides more advanced options than GitHub Pages. Also, Jekyll was dropped and now Bootstrap will be using the Hugo framework. The website was slightly refreshed and it looks... just great!


The list of changes would be much much longer and it's not easy to describe them all. Currently, there's no estimated time of delivery of Bootstrap 5, but you can track the progress on its official repository on GitHub

Write
Please insert min. 20 characters.