Home » Uncategorized » Migrating from Bootstrap 4 to Bootstrap 5

Migrating from Bootstrap 4 to Bootstrap 5

Many websites still use Bootstrap 4. If you want to upgrade, or to read an old tutorial, you must know what changed. This chapter lists the main differences. The class names changed for a good reason: Bootstrap 5 supports right to left languages, so “left” and “right” became “start” and “end”.

Big changes

  • jQuery is removed. The JavaScript is plain JavaScript. You can still use jQuery in your own code, but Bootstrap does not need it.
  • Internet Explorer is not supported.
  • New data attributes: data-toggle became data-bs-toggle, and the same for data-target, data-dismiss, data-ride and others.
  • New xxl breakpoint (1400px) and a new grid with CSS variables for the gutter.
  • New components: offcanvas, accordion (new), and in 5.3 the dark mode (color modes) and more utilities.
  • RTL support (right to left languages).

Renamed classes and attributes

Bootstrap 4Bootstrap 5
data-toggle, data-target, data-dismissdata-bs-toggle, data-bs-target, data-bs-dismiss
.ml-*, .mr-*, .pl-*, .pr-*.ms-*, .me-*, .ps-*, .pe-*
.float-left, .float-right.float-start, .float-end
.text-left, .text-right.text-start, .text-end
.font-weight-bold, .font-italic.fw-bold, .fst-italic
.text-monospace.font-monospace
.sr-only.visually-hidden
.no-gutters.g-0
.badge-primary.text-bg-primary
.close (with ×).btn-close
.custom-select.form-select
.dropdown-menu-right.dropdown-menu-end
.rounded-sm, .rounded-lg.rounded-1, .rounded-3
.embed-responsive.ratio

Removed

  • .form-group, .form-row and .form-inline: use the grid (.row g-3) and margin utilities.
  • .input-group-prepend and .input-group-append: put the items directly in the .input-group.
  • .btn-block: use .d-grid (and .gap-2) on the parent.
  • .jumbotron: use utilities like p-5 bg-body-tertiary rounded-3.
  • .media: use flex utilities (d-flex).
  • .card-deck: use the grid or .card-group.
  • The .custom-* form classes (custom checkbox, custom file): the normal form classes now use the custom style.

Example: a Bootstrap 4 snippet and the Bootstrap 5 version

<!-- Bootstrap 4 -->
<button type="button" class="btn btn-primary btn-block ml-2" data-toggle="modal" data-target="#myModal">Open</button>

<!-- Bootstrap 5 -->
<div class="d-grid">
  <button type="button" class="btn btn-primary ms-2" data-bs-toggle="modal" data-bs-target="#myModal">Open</button>
</div>

How to upgrade

  1. Read the migration guide on getbootstrap.com for your target version.
  2. Replace the CSS and JS files. Remove jQuery if only Bootstrap used it.
  3. Search your files for the old attributes and classes of the table above, and replace them.
  4. Rewrite the forms and the other removed parts.
  5. Test the pages on mobile and desktop, in light and dark mode, and check the JavaScript components (modal, dropdown, tooltip).

What about Bootstrap 6?

Bootstrap 6 exists only as an alpha (pre-release) version at the time of writing. It is not recommended for real projects. For new projects, use Bootstrap 5.3.

Note: A good way to upgrade is to do it page by page, or to start the new design in Bootstrap 5, instead of trying to change a very big site in one day. Next: Layout Example.

Share this post:

Share on LinkedIn
Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.