What’s changed in Bootstrap 5?

At Mono, we’ve used Bootstrap for quite a while. I think the first time I used Bootstrap myself it was at version 2.

While we like the freedom of being able to create a custom design and implementing it from scratch, there are undeniably many situations where a battle-tested framework can save you time. It allows you to not reinvent the wheel.

One of the situations where Bootstrap shines is when you are doing the design for a backoffice type of application, where a custom visual design is not the highest priority.

Release status

Bootstrap 5 is currently in its 3rd alpha release. The plan seems to be to release Bootstrap 5 to the public as a final version near the end of the year. In one of our recent projects we already went ahead with using it, anticipating that the underlying logic wouldn’t change that much from now until the release.

So let’s talk about some of the most important changes in Bootstrap 5.

What’s changed?

A more approachable migration

First of all, not really a feature but more of a logic change: the migration from v4 to v5 is much more approachable than before (from v3 to v4).

For those thinking about switching from Bootstrap 4 to 5, the good news is that in terms of CSS and default components, not much has changed. The classes and logic are quite similar from 4 to 5.

The Bootstrap team seems to have settled on a “stable API” i.e. to not change class names too much from one release to the other.

This is great news for many applications that want to make the move and were not looking forward to the kind of class-change move that a Bootstrap v3 to v4 migration made you do.

No jQuery

Next, there is the removal of jQuery as a dependency.

The JS logic for JS plugins like toggles and modals is now written in vanilla JS. There is still the possibility to use jQuery if you really want to (see this docs entry).

The JS files are even available as ESM modules, which allows you to use Bootstrap directly as a module in your browser, if your browser supports it. However, the plugins that depend on Popper do not yet work this way.

This move removes a dependency, and it modernizes Bootstrap. jQuery is a thing from the past, it was a real big help, but it has served its purpose. jQuery doesn’t belong in a development project launched in 2020.

However, I wonder if I will actually encounter this code in practice, as the logic for handling modals, popups etc. is probably contained in the Javascript framework used in the project. Many Javascript frameworks have a re-implementation of Bootstrap specific for that framework (like ng-bootstrap).

I believe the source files will mostly be used as a reference for the intended functionality. I don’t there are that many development situations where you would use them directly.

CSS custom properties for quick customizations

Internet Explorer support has been dropped, paving the way to use newer CSS features like CSS custom properties.

In practice, this allows you to customize Bootstrap without a compilation step. If an aspect of the design uses CSS custom properties, you can simply drop in code to override it, without going through the dance of setting up a Sass-based workflow where you override the framework variables.

For example:

.table {
  --bs-table-bg: #FFF;
  --bs-table-striped-bg: #EFF1F7;
}

I imagine this can be useful when you quickly want to tweak some colors. The way it works is demonstrated in this Svelte REPL where a table is customized to have some other colors.

Bootstrap icons

Bootstrap now comes with its own icon set. You can view this set here. I am not sure if I am a fan of the style, but it’s good that there is a focus on this area. No UI framework is complete without a way to handle icons.

We’re likely to use our own Mono Icons as a default choice in our projects; in the recent project we customized Bootstrap 5 to work together with our icon set.

New/revised components: accordion, file input etc.

In Alpha 3, the Bootstrap team added a new Accordion component. 

Inspecting the code, it uses an SVG as a data-image, directly in the CSS.

If we were to use Mono icons, this creates a design problem where there are 2 different icon styles in the project.

I can already see the work we’re going have to create a customized version of this component. And that is exactly the problem that you have with Bootstrap sometimes: if you don’t use it as-is, you are sometimes setting yourself up for trouble.

Luckily, you can simply create a custom stylesheet where you don’t include certain elements. For example, we have never used the “Jumbotron” component in Bootstrap 4. We’ll be checking whether this component is useful or whether we will need to provide our own version.

New utilities + new utility API

I have a love-hate relationship with utility based CSS. I love it for quick prototyping, but I hate it when a high unelegant set of divs and classes lands in production and becomes maintenance hell.

In the Alpha 3 blog post, the Bootstrap talks about new utility classes and even a whole API to generate utility classes. 

This is obviously Tailwind-inspired, and those who have been following me on Twitter or have been reading my personal blog know that I, ahem, am not a big fan.

In general, I am also not a big fan of making CSS too complex by using too many Sass features to generate code. I think it increases complexity. A design rarely needs 5 opacity classes like explained in the first example on the utilities API page.

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

This is probably a blog post in itself when I get to work with this code. 

Conclusion

This blog post talks about the most important changes in Bootstrap 5 (in my humble opinion). If you want to dive into the exact details, you can reference these posts:

• Alpha 3 release post (Nov 11)
• Alpha 2 release post (Sep 29)
• Alpha 1 release post (June 16)

Bootstrap 5 is a modernized version of Bootstrap 4. The API surface is similar, making it easier to migrate to the newest version.

For us, Bootstrap remains a solid choice as a technical base for web applications, especially for projects with limited resources.

We typically extend Bootstrap with some customizations to make it to our liking. We find that there is a lot of value in using a known framework that is actively being maintained.

When we can start design work from a base that contains common design patterns, we can then spend our time on figuring out the exact needs of the design project at hand instead of constantly reinventing the wheel.

We’re looking forward to using Bootstrap 5 in practice in more projects.