Over the past few weeks I’ve migrated my website to a new content management system.

I took the opportunity to upgrade my website’s front-end technologies to their latest releases – Bootstrap 5 and VueJS 3, for example.

This post documents some of the changes I came across migrating Bootstrap 4 to 5.

Please note: there will be other changes than these; I don’t use every component in the Bootstrap framework. Bootstrap 5 is still in beta and things may change before the final release.

Layout

Margin-left and margin-right utilities are now margin-start and margin-end.

Example: ml-auto becomes ms-auto, mr-auto becomes me-auto.

The default container width is now 1340px – up from 1140px.

Float Utilities

A similar change to the above affects the float-left and float-right utilities. As they used the full “left” and “right” words, they now use “start” and “end.”

Example: float-left becomes float-start, float-right becomes float-end.

Text / Typography

Like the float utility classes, text alignment utilities have received the same start and end behaviour.

Example: text-left becomes text-start, text-right becomes text-end.

Links are now underlined by default. The default Bootstrap stylesheet previously removed underlines from links; this is no longer the case. This matches the more traditional appearance of hyperlinks.

To remove the links and revert to the previous appearance, you can either add a class of “text-decoration-none” to an individual link, or add a similar directive to your stylesheet:

a {
    text-decoration: none;
}

Dropdown / Navbar

The “data” attributes used by Bootstrap now have a ”bs” prefix. If your dropdown or navbar menus aren’t working after upgrading to Bootstrap 5, you may need to prefix the data-toggle and data-target attributes.

Example: data-toggle becomes data-bs-toggle, data-target becomes data-bs-target.

Badges

Badges no longer have their own colour classes – for example: badge-secondary. Instead, they use the standard bg-* classes.

Example: badge-secondary becomes bg-secondary.

You may need to also add text colours if the background is dark – for example: text-white when using bg-dark.

JavaScript

Another major change in Bootstrap is the removal of jQuery. Bootstrap 5 no longer requires jQuery and opts for plain JavaScript.

Example – opening a modal in Bootstrap 4:

$('#myModal').modal('show')

now becomes the following plain JavaScript in Bootstrap 5:

var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
    keyboard: false
});
myModal.show();

New Features

Like any decent major release, Bootstrap 5 also includes new features. The more I use Bootstrap 5 in my projects, the more I’m finding.

Modals

One of my favourites so far is full-screen modals. You can set a breakpoint where the modal becomes full-screen at screen sizes up to that breakpoint.

Example: adding the class modal-fullscreen-lg-down will cover the whole screen with the modal’s content on devices up to 992 pixels wide.

Font Size

There are 2 additional display classes to the display-1 through display-4classes in Bootstrap 4. Please welcome display-5 and display-6.

In addition to the h1 through h6, and display-1 through display-4 classes, you can now choose between 6 different font size classes. These only apply changes to the font-size style attribute. They follow the same order as the H tags – i.e. fs-1 is biggest, fs-6 is smallest..

Example: fs-1

Have you found any other changes or new features? Let me know in the comments below.