What's new in Bootstrap 5?

web
mobile

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

Bartłomiej Malanowski staffpropremium posted 2 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

eew commented 4 months ago

Bootstrap 5 Release Date

The team officially announced bootstrap V5 and mentioned many major changes in its to-do list. As of today (17/10/19), 371 tasks are done and 58 are in the to-do category. The bootstrap 5 release date is not yet announced by any officials but the expected release could be in early 2020.

Major Changes in Bootstrap 5

The significant changes expected in bootstrap V5 includes:

Moving from Jekyll to Hugo🔥: Hugo is the world’s fastest Static Site Generator that undoubtedly generates static sites in milliseconds and uses Golang language. Jekyll is the oldest static site generator and is dropped in bootstrap 5. The bootstrap team has made changes to their dependencies to support this move, and it is near completion stated by the officials.

Jquery Removed: In favor of pure javascript, the bootstrap team has removed the largest client-side dependencies.

Improving bootstrap branch for development: According to the official announcement on the website, master will become bootstrap v5’s new v3 dev branch and to develop v5 they will cut a new master branch from v4-dev.

IE10 support Removed: Bootstrap 5 will not continue with Internet Explorer 10 anymore and has removed IE10 browser support in the latest version.

SVG Icon Library🔥: The bootstrap team is working on exploring its own Scalable Vector Graphics (SVG) library for the latest version.


eew commented 4 months ago

Removing of QUnit

Massive Changes in Javascript

Minor Changes in CSS

Drop support for Node.js 8

Building Testing Infrastructure in Jasmine

Revamp grid to blend flexbox and grid layout

Responsive sticky top

Update DevDependencies


eew commented 4 months ago

Changes in Bootstrap 5

Currently the major changes expected in v. 5 include:

Removing jQuery

Deprecated support for IE10

Dropping QUnit

Building testing infrastructure in Jasmine

Documentation rewritten in Hugo

General massive changes in JavaScript

General minor changes in CSS

Responsive containers


eew commented 4 months ago

Bootstrap 5 Release Date. The team officially announced bootstrap V5 and mentioned many major changes in its to-do list. As of today (17/10/19), 371 tasks are done and 58 are in the to-do category. The bootstrap 5 release date is not yet announced by any officials but the expected release could be in early 2020.


Write
Please insert min. 20 characters.