Migrating from Bootstrap 4 to Bootstrap 5

Bootstrap 5 introduced a number of breaking changes and dropped legacy dependencies (like jQuery). Migration is mostly smooth, but you need to address these key areas:

1. Dependency Changes

• Dropped jQuery → All JavaScript plugins are now written in vanilla JS.

• Dropped Internet Explorer support → No need for polyfills.

Migration tip:
Remove jQuery <script> includes unless you use it for your own code.

2. Grid System Changes

• .form-row → removed, use .row.

• .col-form-label-sm & .col-form-label-lg → replaced with .col-form-label + utilities.

• Gutters (.gutter-*) → replaced by .g-* classes (e.g., .g-3).

Before (Bootstrap 4):

<div class="row no-gutters">
  <div class="col-6">Left</div>
  <div class="col-6">Right</div>
</div>

After (Bootstrap 5):

<div class="row g-0">
  <div class="col-6">Left</div>
  <div class="col-6">Right</div>
</div>

3. Utilities & Helpers

• .float-left / .float-right → replaced with .float-start / .float-end.

• .text-left / .text-right → replaced with .text-start / .text-end.

• .badge-pill → removed, use .rounded-pill.

Migration tip:
Global search/replace is effective here.

4. Forms Overhaul

• Custom form controls merged with regular controls. No more .custom-select, .custom-checkbox.

• Floating labels introduced with .form-floating.

• .form-group removed (just use .mb-* spacing utilities).

Before (Bootstrap 4):

<div class="form-group">
  <label for="email">Email</label>
  <input type="email" class="form-control" id="email">
</div>

After (Bootstrap 5):

<div class="mb-3">
  <label for="email" class="form-label">Email</label>
  <input type="email" class="form-control" id="email">
</div>

5. Navbar Changes

• .navbar-light / .navbar-dark → still exist.

• No .form-inline → use .d-flex utilities.

• .navbar-toggleable-* removed long ago, now only .navbar-expand-*.

Before (Bootstrap 4):

<form class="form-inline my-2 my-lg-0">
  <input class="form-control mr-sm-2" type="search" placeholder="Search">
</form>

After (Bootstrap 5):

<form class="d-flex">
  <input class="form-control me-2" type="search" placeholder="Search">
</form>

6. JavaScript Plugins

• All plugins now use data-bs-* attributes instead of data-*.

• Event names now prefixed with bs. (e.g., shown.bs.modal).

Before (Bootstrap 4):

<button data-toggle="modal" data-target="#myModal">Open</button>

After (Bootstrap 5):

<button data-bs-toggle="modal" data-bs-target="#myModal">Open</button>

7. Icons

• Glyphicons (v3) and FontAwesome references are outdated.

• Official Bootstrap Icons available separately.

<i class="bi bi-alarm"></i>

8. Removed Components

• .jumbotron → replaced by .bg-light p-5 with utilities.

• .media object → replaced by flex utilities.

• .badge-pill → replaced by .rounded-pill.

Real-World Patterns in Bootstrap 5

Here are some modern patterns you’ll see in production apps:

1. Dashboard Layout

• Offcanvas sidebar for navigation.

• Responsive grid for content.

• Utility classes for spacing instead of custom CSS.

2. Authentication Pages

• Centered form using .d-flex align-items-center justify-content-center vh-100.

• Floating label forms for a modern look.

3. Marketing Landing Page

• Hero section with .container-fluid + .text-center.

• Responsive cards for features.

• Utility-first spacing, typography, and CTA buttons.

4. Admin Tables

• .table-responsive for mobile.

• Inline badges for statuses.

• Tooltips + icons for actions.

Migration Checklist

1. Remove jQuery and IE polyfills.

2. Update grid classes (.g-*, .row instead of .form-row).

3. Replace directional classes (-left/-right → -start/-end).

4. Migrate forms (remove .form-group, replace .custom-*).

5. Update JS data attributes (data-bs-*).

6. Replace deprecated components (Jumbotron, Media).

7. Adopt utility classes over custom CSS.