Bootstrap 5 vs Bootstrap 4 — What Actually Changed

I've migrated several projects from Bootstrap 4 to Bootstrap 5. Here's what actually changed, what you need to do to migrate, and whether it's worth it for your project.

The Biggest Change: No jQuery

Bootstrap 4 required jQuery as a dependency. Every Bootstrap JS component — modals, dropdowns, tooltips, collapse — ran on jQuery.

Bootstrap 5 dropped jQuery entirely. All components were rewritten in vanilla JavaScript. The bootstrap.bundle.min.js file includes Popper.js for positioning but nothing else.

This matters because:

• Smaller bundle (jQuery is ~87KB minified, ~30KB gzipped)
• One less dependency to maintain
• Modern JavaScript without the $.fn overhead
• No version compatibility issues between jQuery and Bootstrap

If your custom JavaScript doesn't use jQuery, this migration is just removing the jQuery script tag. If your custom code relies on jQuery, you'll need to rewrite those parts.

Class Name Changes

These are the most common find-and-replace items:

The l/r to s/e (start/end) changes are the most common thing to miss. Bootstrap 5 uses logical properties that respect RTL languages.

Grid Changes

The grid system is mostly the same but with one addition: a new xxl breakpoint at 1400px.

Copy
Bootstrap 4: xs, sm, md, lg, xl
Bootstrap 5: xs, sm, md, lg, xl, xxl

Gutter classes changed significantly:

Copy
<!-- Bootstrap 4 — gutters via padding on cols -->
<div class="row no-gutters">

<!-- Bootstrap 5 — gutter utility classes -->
<div class="row g-0">  <!-- no gutters -->
<div class="row g-3">  <!-- 16px gutters -->
<div class="row gx-4 gy-2">  <!-- different h/v gutters -->

Removed Components

Several Bootstrap 4 components were removed in Bootstrap 5:

Jumbotron — removed. Replace with utility classes: a <section> with py-5 bg-light and a container inside gives you the same effect.

Media object — removed. Replace with flexbox utilities: d-flex gap-3.

Card deck/columns — removed. Replace with Bootstrap grid: row row-cols-1 row-cols-md-3.

Form inline — removed. Use flexbox utilities instead.

Forms Overhaul

Bootstrap 5 significantly redesigned the form system. New classes:

Copy
<!-- Bootstrap 4 -->
<input type="text" class="form-control">
<select class="custom-select">
<input type="range" class="custom-range">
<div class="custom-file">

<!-- Bootstrap 5 -->
<input type="text" class="form-control">
<select class="form-select">  <!-- was custom-select -->
<input type="range" class="form-range">  <!-- was custom-range -->
<input type="file" class="form-control">  <!-- file input simplified -->

Floating labels are new in Bootstrap 5:

Copy
<div class="form-floating">
  <input type="email" class="form-control" id="email" placeholder="Email">
  <label for="email">Email address</label>
</div>

What's New in Bootstrap 5

RTL support — Bootstrap 5 ships with separate RTL CSS. The start/end classes are the foundation of this.

Offcanvas component — new in Bootstrap 5. Slide-in panels from any edge.

CSS custom properties — Bootstrap 5 uses CSS variables extensively, making runtime theming much easier.

Dark mode (5.3) — data-bs-theme="dark" attribute on any element.

Improved utilities API — generate custom utility classes via Sass.

No IE support — Bootstrap 5 dropped Internet Explorer support entirely. This allowed using modern CSS features.

Should You Migrate?

Yes if:

• Starting new features on the project
• You're already doing a refactor
• jQuery is causing dependency issues
• You want RTL support
• You want dark mode

Wait if:

• The project is stable with no active development
• Your custom JS is deeply coupled to jQuery
• You don't have time for testing

The migration itself takes a few hours for a typical project. The tricky part is removing jQuery from custom JavaScript if you're using it. The class name changes are mechanical — find-and-replace handles 90% of it.