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

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-automr-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-startfloat-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-starttext-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-toggledata-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.

Forms

Drop-down controls using the form-control class now need to use the specialised form-select class.

Example: form-control becomes form-select.

Radio buttons and check boxes no longer need the “custom” classes to achieve a consistent look across platforms.

Example – a “custom” checkbox in Bootstrap 4:

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

now becomes the same as any other checkbox in Bootstrap 5:

<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>

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-4 classes 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.