DEV Community

Sakshi
Sakshi

Posted on

Bootstrap 5.3 Features Every Developer Should Know — What Actually Changed

#bootstrap #css #frontend #html

I've been building with Bootstrap since version 3. Watched it go from a 12-column float-based grid to a proper CSS Grid-capable framework. Bootstrap 5.3 shipped in May 2023 and the changes are more significant than most developers realize — especially if you're still building with 5.0 or 5.1 patterns.

This isn't a summary of the changelog. Here's what actually changed and why it matters in a production codebase.

Native Color Mode Support — The Biggest Change

Bootstrap 5.3 added native support for color modes via the data-bs-theme attribute. This is the change with the largest practical impact and the one most teams haven't adopted yet.

Before 5.3 — dark mode in Bootstrap required either duplicate CSS for every component or class-based overrides. Both created maintenance debt that grew with every component you added.

Bootstrap 5.3 — set data-bs-theme="dark" on any element and every Bootstrap component inside responds automatically. Cards, modals, dropdowns, tables, forms, badges, alerts, navbars — all switch without a line of custom CSS.

<!-- Light mode — default -->
<html lang="en">

<!-- Dark mode — entire page -->
<html lang="en" data-bs-theme="dark">

<!-- Dark mode — scoped to one component -->
<div class="card" data-bs-theme="dark">
  <div class="card-body">
    This card is dark even if the page is light.
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

The scoped application is the underused feature. A dark sidebar inside a light page. A dark code block inside a light article. No custom CSS — just the attribute.

Toggle with one line of JavaScript:

document.documentElement.setAttribute(
  'data-bs-theme',
  document.documentElement.getAttribute('data-bs-theme') === 'dark'
    ? 'light'
    : 'dark'
)
Enter fullscreen mode Exit fullscreen mode

Every Bootstrap component switches. For custom components — use CSS custom properties:

:root {
  --app-sidebar-bg: #f8f9fa;
  --app-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

[data-bs-theme="dark"] {
  --app-sidebar-bg: #161b2e;
  --app-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.sidebar {
  background: var(--app-sidebar-bg); // switches automatically
}
Enter fullscreen mode Exit fullscreen mode

No duplicate CSS. No class juggling. One attribute change handles everything.

CSS Variables for Component-Level Customization

Bootstrap 5.3 exposed CSS custom properties for individual component customization. Before this — overriding a button's hover color required either a specificity battle or modifying SCSS source.

Now each component exposes its own custom properties:

/* Override button colors without touching SCSS */
.btn-primary {
  --bs-btn-bg: #fd4766;
  --bs-btn-border-color: #fd4766;
  --bs-btn-hover-bg: #e63d5a;
  --bs-btn-hover-border-color: #e63d5a;
  --bs-btn-active-bg: #cc3650;
  --bs-btn-focus-shadow-rgb: 253, 71, 102;
}
Enter fullscreen mode Exit fullscreen mode

The practical benefit — customize a component's appearance in one place without fighting CSS specificity or modifying Bootstrap source. Works even without a SCSS build pipeline.

Updated Color System

Bootstrap 5.3 expanded the color system significantly.

Subtle background utilities — bg-primary-subtle, bg-success-subtle etc. Soft tinted backgrounds appropriate for cards, badges, and alert panels:

<div class="bg-primary-subtle text-primary rounded-3 p-3">
  Soft primary background — adapts in dark mode automatically
</div>

<div class="bg-success-subtle text-success rounded-3 p-3">
  Soft success background
</div>
Enter fullscreen mode Exit fullscreen mode

In dark mode these subtle colors automatically adjust to appropriate dark tints. No custom CSS needed for either mode.

Emphasis text utilities — text-primary-emphasis, text-success-emphasis etc. High-contrast versions of semantic colors for both light and dark modes.

Border color utilities — border-primary-subtle, border-success-subtle etc. Consistent with the subtle background system.

A stat card that previously needed custom SCSS for its tinted background now uses bg-primary-subtle. One utility class. Both modes handled.

New Utility Classes

Bootstrap 5.3 added utility classes that cover patterns developers were writing custom CSS for.

object-fit utilities:

<img src="photo.jpg" class="object-fit-cover w-100" style="height: 200px;">
<img src="photo.jpg" class="object-fit-contain w-100" style="height: 200px;">
Enter fullscreen mode Exit fullscreen mode

Responsive variants: object-fit-md-cover, object-fit-lg-contain. Eliminates custom CSS just for image fitting behavior.

Directional overflow utilities:

<div class="overflow-x-auto">Horizontal scroll only</div>
<div class="overflow-y-auto">Vertical scroll only</div>
<div class="overflow-x-hidden">Hide horizontal overflow</div>
Enter fullscreen mode Exit fullscreen mode

Useful for data tables and code blocks that overflow in one direction only.

z-index utilities:

<div class="z-0">z-index: 0</div>
<div class="z-1">z-index: 1</div>
<div class="z-2">z-index: 2</div>
<div class="z-3">z-index: 3</div>
<div class="z-n1">z-index: -1</div>
Enter fullscreen mode Exit fullscreen mode

Finally. Z-index management in utility classes instead of scattered style="z-index: 999" throughout templates.

Gap utilities expanded:

<!-- Responsive gap -->
<div class="d-flex gap-2 gap-md-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

<!-- Directional gap -->
<div class="row row-gap-3 column-gap-4">...</div>
Enter fullscreen mode Exit fullscreen mode

Updated Form Controls

Floating labels work reliably now — earlier Bootstrap 5.x versions had edge cases with autofill:

<div class="form-floating mb-3">
  <input type="email"
         class="form-control"
         id="emailInput"
         placeholder="name@example.com">
  <label for="emailInput">Email address</label>
</div>

<!-- Floating labels now work correctly with select elements -->
<div class="form-floating mb-3">
  <select class="form-select" id="roleSelect">
    <option value="">Select role</option>
    <option value="admin">Admin</option>
    <option value="editor">Editor</option>
  </select>
  <label for="roleSelect">Role</label>
</div>
Enter fullscreen mode Exit fullscreen mode

Color input styling:

<input type="color"
       class="form-control form-control-color"
       value="#fd4766"
       title="Choose theme color">
Enter fullscreen mode Exit fullscreen mode

Color inputs now render consistently styled across browsers.

Navbar Updates

Bootstrap 5.3 simplified navbar theming. The old navbar-light and navbar-dark classes are deprecated:

<!-- Old approach — deprecated in 5.3 -->
<nav class="navbar navbar-light bg-light">...</nav>
<nav class="navbar navbar-dark bg-dark">...</nav>

<!-- New approach — 5.3 -->
<nav class="navbar bg-body-tertiary">...</nav>

<!-- Dark navbar — respects color mode -->
<nav class="navbar" data-bs-theme="dark">...</nav>
Enter fullscreen mode Exit fullscreen mode

bg-body-tertiary adapts to the current color mode automatically — light gray in light mode, dark gray in dark mode. No separate dark variant needed.

CSS Grid Support

Bootstrap 5.3 added experimental CSS Grid support alongside the existing flexbox grid:

$enable-grid-classes: true;
$enable-cssgrid: true;
Enter fullscreen mode Exit fullscreen mode 
<div class="grid">
  <div class="g-col-6">Half width</div>
  <div class="g-col-6">Half width</div>
  <div class="g-col-4">One third</div>
  <div class="g-col-4">One third</div>
  <div class="g-col-4">One third</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Responsive variants work the same way:

<div class="grid">
  <div class="g-col-12 g-col-md-6 g-col-lg-4">
    Full on mobile, half on tablet, third on desktop
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

The flexbox grid remains the default — CSS Grid is opt-in. But for complex layouts it's more efficient and supports subgrid in modern browsers.

JavaScript API Updates

All components now support a consistent getInstance / getOrCreateInstance pattern:

// Get existing instance — returns null if not initialized
const modal = bootstrap.Modal.getInstance('#myModal')

// Get instance or create new one — never returns null
const modal = bootstrap.Modal.getOrCreateInstance('#myModal')

// Dispose a component cleanly
modal.dispose()
Enter fullscreen mode Exit fullscreen mode

Events are consistent across all animated components:

const myModal = document.getElementById('myModal')

myModal.addEventListener('show.bs.modal', event => {
  // fires immediately when show() is called
})

myModal.addEventListener('shown.bs.modal', event => {
  // fires when modal is fully visible — CSS transition complete
})

myModal.addEventListener('hide.bs.modal', event => {
  // fires immediately when hide() is called
  // prevent with event.preventDefault()
})

myModal.addEventListener('hidden.bs.modal', event => {
  // fires when modal is fully hidden
})
Enter fullscreen mode Exit fullscreen mode

The show.* / shown.* and hide.* / hidden.* pairs exist for all animated components — modals, offcanvas, dropdowns, collapses, tooltips, popovers.

Upgrading From Earlier 5.x

5.3 is a minor version bump from 5.0, 5.1, or 5.2. No breaking changes. The new features are additive.

What's worth updating after the upgrade:

Replace navbar-light and navbar-dark with data-bs-theme on navbars. Add dark mode support using data-bs-theme on the root element. Replace custom CSS for object-fit and directional overflow with the new utility classes. Update custom component colors to use CSS custom properties under [data-bs-theme="dark"] instead of class-based dark mode overrides.

None of these are required — the deprecated approaches still work. But cleaning them up reduces future maintenance.

Starting New Projects

Start new Bootstrap projects with 5.3. The color mode system, expanded utility classes, and CSS custom properties for component customization make it meaningfully better than earlier 5.x versions.

Patterns worth adopting from day one:

data-bs-theme for dark mode — not class-based. CSS custom properties under [data-bs-theme="dark"] for custom components. bg-primary-subtle for tinted backgrounds. object-fit-cover for image containers. overflow-x-auto for data tables.

Browse Bootstrap 5.3 templates built with these patterns at LettStart Design — color modes implemented correctly, CSS custom properties throughout, Lighthouse above 80. Use FIRST30 for 30% off.

Top comments (0)