Migrating to Bootstrap 5 & Bootstrap 6 Preview (Bootstrap Tutorial)

Many websites you will work on, from college projects to office portals, still run on Bootstrap 3 or 4. Interview questions and freelance jobs often start with "upgrade this site to Bootstrap 5". Knowing what changed between versions lets you read old code, fix it quickly, and avoid mixing versions by accident.

In this lesson you will learn the big changes from Bootstrap 3 to 4 to 5, follow a step-by-step migration, and get a preview of Bootstrap 6, which is in alpha (testing) as of October 2026.

The big picture

Version	Last release	Key facts
Bootstrap 3	3.4.1	Less, float grid, `col-xs-*`, panels, Glyphicons, needs jQuery
Bootstrap 4	4.6.2	Sass, flexbox grid, cards, `ml-`/`mr-`, needs jQuery and Popper 1
Bootstrap 5	5.3.8 (current)	No jQuery, `data-bs-*`, start/end classes, CSS variables, colour modes in 5.3
Bootstrap 6	6.0.0-alpha.1	Testing only: modern CSS, ES modules, new class syntax

Bootstrap 3 and 4 are no longer developed: no new features and no fixes. New projects should use Bootstrap 5.3.

The most important change: no jQuery

Bootstrap 3 and 4 needed the jQuery library, and you controlled components with jQuery calls. Bootstrap 5 is plain JavaScript, so jQuery code must be rewritten:

Bootstrap 4 (jQuery)	Bootstrap 5
`$('#m').modal('show')`	`bootstrap.Modal.getOrCreateInstance('#m').show()`
`$('#m').on('hidden.bs.modal', fn)`	`document.getElementById('m').addEventListener('hidden.bs.modal', fn)`
`$('[data-toggle="tooltip"]').tooltip()`	`document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => new bootstrap.Tooltip(el))`
`$('.toast').toast('show')`	`bootstrap.Toast.getOrCreateInstance(el).show()`
`$('#c').collapse('hide')`	`bootstrap.Collapse.getOrCreateInstance(el).hide()`

If jQuery happens to be on the page anyway (because of an old plugin), Bootstrap 5 still registers its components as jQuery plugins, so old $(...).modal() calls keep working during a gradual migration. Adding data-bs-no-jquery to <body> switches that off.

Renamed data attributes

Every data attribute gained a bs namespace, so it cannot clash with other libraries:

Diff

- <button data-toggle="modal" data-target="#login">Log in</button>
+ <button data-bs-toggle="modal" data-bs-target="#login">Log in</button>

- <button class="close" data-dismiss="alert">&times;</button>
+ <button class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

- <div class="collapse" data-parent="#faq">
+ <div class="collapse" data-bs-parent="#faq">

This is the change that breaks old pages most silently: the HTML looks fine, but nothing opens. Run this example, where the first dropdown uses Bootstrap 4 attributes on a Bootstrap 5 page:

HTMLTry it yourself

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Old markup on Bootstrap 5</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h1 class="h5">Bootstrap 4 markup (broken in 5)</h1>
    <div class="d-flex mb-4">
      <div class="dropdown ml-auto">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Account</button>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#profile">Profile</a>
        </div>
      </div>
      <span class="badge badge-pill badge-success ml-2 align-self-center">Online</span>
    </div>

    <h2 class="h5">Bootstrap 5 markup (works)</h2>
    <div class="d-flex">
      <div class="dropdown ms-auto">
        <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Account</button>
        <div class="dropdown-menu dropdown-menu-end">
          <a class="dropdown-item" href="#profile">Profile</a>
        </div>
      </div>
      <span class="badge rounded-pill text-bg-success ms-2 align-self-center">Online</span>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

In the old version, the dropdown does not open (data-toggle), the button is not pushed right (ml-auto), and the badge has no colour or pill shape (badge-success, badge-pill). No error appears anywhere; that is why you must test every interactive part after a migration.

Left and right became start and end

Bootstrap 5 supports right-to-left languages, so anything that said "left" or "right" now says "start" or "end":

Bootstrap 4	Bootstrap 5
`ml-`, `mr-`, `pl-`, `pr-`	`ms-`, `me-`, `ps-`, `pe-`
`float-left`, `float-right`	`float-start`, `float-end`
`text-left`, `text-right`	`text-start`, `text-end`
`border-left`, `rounded-right`	`border-start`, `rounded-end`
`dropdown-menu-right`, `dropleft`, `dropright`	`dropdown-menu-end`, `dropstart`, `dropend`

Other common renames and removals

Bootstrap 4	Bootstrap 5
`no-gutters`	`g-0`
`form-group`, `form-row`, `form-inline`	Removed: use `mb-3` and the grid
`custom-select`, `custom-control custom-checkbox`, `custom-file`	`form-select`, `form-check`, `form-control`
`input-group-prepend`, `input-group-append`	Removed: put add-ons directly in `input-group`
`badge-primary`, `badge-pill`	`text-bg-primary`, `rounded-pill`
`sr-only`, `sr-only-focusable`	`visually-hidden`, `visually-hidden-focusable`
`font-weight-bold`, `font-italic`, `text-monospace`	`fw-bold`, `fst-italic`, `font-monospace`
`close`	`btn-close`
`btn-block`	Wrap buttons in `d-grid`
`embed-responsive`	`ratio`
`jumbotron`, `media`, `card-deck`, `card-columns`	Removed: rebuild with utilities and the grid
`rounded-sm`, `rounded-lg`	`rounded-1`, `rounded-3`

Bootstrap 5 also added things that did not exist before: the xxl breakpoint, offcanvas, accordion, floating labels, the utilities API, CSS variables and, in 5.3, colour modes.

Coming from Bootstrap 3

Bootstrap 3 to 5 is a bigger jump, because Bootstrap 4 had already changed a lot:

col-xs-6 becomes col-6; col-md-push-* and col-md-pull-* become order-* classes.
panel, well and thumbnail become cards.
btn-default becomes btn-secondary or btn-outline-secondary; btn-xs is gone.
img-responsive becomes img-fluid; center-block becomes mx-auto d-block.
hidden-xs, visible-md become d-none with responsive d-* classes.
label label-success becomes badge text-bg-success.
Glyphicons are gone: use Bootstrap Icons (see Bootstrap Icons).
navbar-default and navbar-inverse become background classes plus data-bs-theme.

A migration plan that works

Read the official migration guide for each version step on getbootstrap.com. It lists every change.
Swap the files. Replace the old CSS and JS links (and remove jQuery and Popper 1 if nothing else needs them) with the Bootstrap 5.3.8 CSS and bundle.
Search and replace the mechanical changes: data-toggle to data-bs-toggle, data-target to data-bs-target, ml- to ms-, mr- to me-, and so on. Search with care: ml- also matches unrelated words in your own class names.
Rewrite forms and removed components (form-group, custom-*, jumbotron, media).
Rewrite jQuery calls using the table above.
Test every page: click every menu, modal and tab; check phones and tablets; run an accessibility check.
Migrate page by page on large sites, and keep each page on one version only. Loading Bootstrap 4 and 5 together causes conflicts.

Bootstrap 6 preview (alpha)

On 8 October 2026, the Bootstrap team released Bootstrap 6.0.0-alpha.1. An alpha is an early test version: the team says more alphas will come before beta, and details can still change. Do not use it for client projects yet, but it shows where Bootstrap is heading. These points are from the alpha 1 announcement:

Modern browsers only: at least Chrome and Edge 130, Firefox 132 and Safari 18, because it uses light-dark(), :has(), container queries, oklch(), color-mix() and the native <dialog> element. Bootstrap 5 remains available for older browsers.
ES modules only: the script tag needs type="module", and the global window.bootstrap object and the UMD build are gone. With a bundler you still write import { Tooltip } from "bootstrap". The source code is written in TypeScript.
New responsive class syntax: the breakpoint moves to the front, separated by a colon. col-lg-6 becomes lg:col-6, d-md-none becomes md:d-none, and state variants such as hover:opacity-50 appear. The responsive offcanvas-md becomes md:drawer.
Native HTML components: the accordion is built on <details> and <summary> and needs no JavaScript, and a new Dialog component uses <dialog>.
Sass modules: customising uses @use and @forward with token maps; @import-based customising is not supported.
Modern colour system: palettes use oklch() and color-mix(), and dark mode uses light-dark().

HTML

<!-- Bootstrap 6 alpha: for testing only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script type="module" src="https://cdn.jsdelivr.net/npm/bootstrap@6.0.0-alpha.1/dist/js/bootstrap.bundle.min.js"></script>

The good news: everything you learned in this course (the grid idea, utilities, components, accessibility, customising with variables) carries over. Bootstrap 6 changes the spelling of many classes, not the way of thinking.

Common mistakes

Mixing versions on one page. Old classes do nothing and old attributes never fire, without any error.
Forgetting the JavaScript rewrite. jQuery calls fail as soon as jQuery is removed.
Blind search and replace. Replacing mr- everywhere also changes your own classes such as summer-sale. Use word boundaries and review each change.
Using the v6 alpha in production. Class names and APIs may change before the stable release.

Key points

Bootstrap 5 removed jQuery; rewrite $(...).modal() style calls with bootstrap.Component.getOrCreateInstance(el).
All data attributes are now data-bs-*; old data-toggle attributes fail silently.
Left and right became start and end (ms-*, me-*, text-end, dropdown-menu-end).
Many form classes and components were removed or renamed; check the tables and the official migration guide.
Bootstrap 6 is alpha only (6.0.0-alpha.1): ES modules, new md: class syntax, native <details> and <dialog>, and Sass modules.

Exercise

Convert this Bootstrap 4 snippet to Bootstrap 5.3: a navbar with navbar-dark bg-dark, a toggler using data-toggle="collapse" data-target="#nav", a link list with ml-auto, and a form-inline search form with mr-sm-2 on the input. Also convert <span class="badge badge-warning badge-pill">New</span> and <div class="form-group"><label class="sr-only" for="q">Search</label></div>.

Show solution

HTML

<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Pune Pets</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#nav"
            aria-controls="nav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="nav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-sm-2" type="search" aria-label="Search">
        <button class="btn btn-outline-light" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

<span class="badge text-bg-warning rounded-pill">New</span>

<div class="mb-3"><label class="visually-hidden" for="q">Search</label></div>

navbar-dark becomes data-bs-theme="dark", the data attributes gain bs, ml-auto and mr-sm-2 become ms-auto and me-sm-2, form-inline is replaced by d-flex, the badge uses text-bg-warning and rounded-pill, form-group becomes mb-3, and sr-only becomes visually-hidden.

Quick Quiz

1. A Bootstrap 4 page is upgraded to Bootstrap 5 and its modals no longer open. What is the most likely cause?

Bootstrap 5 only listens for the namespaced data-bs-* attributes.

2. What is the Bootstrap 5 version of mr-3?

Right became "end" in Bootstrap 5, so mr-* became me-*.

3. In the Bootstrap 6 alpha, how is col-lg-6 written?

Bootstrap 6 puts the breakpoint first with a colon, like md:d-none.

4. Which statement about Bootstrap 6 is true as of October 2026?

Web Development

Programming Languages

Databases

Data Science & AI

Cloud & DevOps

Security & Systems

Office & Productivity

Migrating to Bootstrap 5 & Bootstrap 6 Preview