Migration from v3

AdminLTE 4 is a ground-up rewrite. It targets Bootstrap 5.3, drops jQuery, ships as TypeScript-authored vanilla JS, and reorganises the CSS class structure. If you’re upgrading an AdminLTE 3 project, the changes below are the ones most likely to bite.

The high-level summary

If your project relies on jQuery or IE 11, stay on AdminLTE 3 — those constraints are not reversible in v4.

Class renames

The most common find-and-replace work:

Bootstrap 4 → 5 utility renames

These come from Bootstrap itself, not AdminLTE, but they affect every page:

A regex find-replace handles most of this in a few minutes. The migration tool bootstrap-5-migration automates the bulk.

jQuery removal

If your app code calls AdminLTE 3 plugins via jQuery ($('.sidebar').PushMenu(), etc.), those calls no longer work. Replacements:

// AdminLTE 3
$('.sidebar-toggle').on('click', function () {
  $('body').toggleClass('sidebar-collapse')
})

// AdminLTE 4 — the data-API does this for you
// <a href="#" data-lte-toggle="sidebar">...</a>

If you need programmatic control, import the plugin class directly:

import { PushMenu } from "admin-lte"

new PushMenu(document.querySelector(".sidebar-toggle")).toggle()

All seven JS plugins (Layout, CardWidget, Treeview, DirectChat, FullScreen, PushMenu, plus initAccessibility) are exported from admin-lte.

Third-party plugin replacements

AdminLTE 3 bundled a plugins/ folder full of jQuery widgets. AdminLTE 4 ships none of them — it stays framework-only and documents best-in-class vanilla-JS equivalents instead. Every replacement below is MIT-licensed, actively maintained, and needs no jQuery:

Install snippets and wiring code for each replacement live on the Recommended Integrations page.

Dark mode

AdminLTE 3 used a .dark-mode class toggled on the <body>. AdminLTE 4 uses Bootstrap 5.3’s native data-bs-theme="dark" attribute, which can be applied at any level — <html>, <body>, or a single component.

<!-- AdminLTE 3 -->
<body class="dark-mode">

<!-- AdminLTE 4 -->
<html data-bs-theme="dark">

The included Color Mode widget reads/writes this attribute and persists the user’s choice in localStorage. See the Color Mode docs page for the toggle implementation.

Extra colours moved to an opt-in stylesheet

AdminLTE 3 shipped a lot of one-off colour classes (.bg-navy, .bg-purple, .bg-fuchsia, .bg-gradient-*, the sidebar/navbar skins) inside its main CSS. In v4 the core stylesheet only knows Bootstrap’s theme colours; the extended palette is a separate, opt-in file, dist/css/adminlte-colors.css, with a redesigned set of fourteen colours (every one takes white text at ≥ 4.5:1) and the same class families for each — .bg-*, .text-bg-*, .bg-gradient-*, .card-*, .callout-*, ….

<!-- AdminLTE 3 -->
<div class="card bg-navy">…</div>
<aside class="main-sidebar sidebar-dark-primary">…</aside>

<!-- AdminLTE 4 — load css/adminlte-colors.css after adminlte.css -->
<div class="card text-bg-navy">…</div>
<aside class="app-sidebar text-bg-navy shadow" data-bs-theme="dark">…</aside>

lightblue became sky and maroon became pink; $lte-palette-aliases restores the old names if your markup depends on them. Everything else — the palette, skins, adding your brand colours — is on the Colors page. For retheming Bootstrap’s own colours, override --bs-primary etc. on :root; see Customization.

Icons

AdminLTE 3 demos used FontAwesome 6 free. AdminLTE 4 standardises on Bootstrap Icons — they’re SVG, lighter, MIT-licensed, and ship with Bootstrap’s ecosystem.

<!-- AdminLTE 3 -->
<i class="fas fa-home"></i>

<!-- AdminLTE 4 -->
<i class="bi bi-house"></i>

If you’d rather stick with FontAwesome (or use Lucide, Tabler Icons, Material Symbols, etc.), nothing in AdminLTE 4 forces Bootstrap Icons — load whichever icon font you prefer and replace the <i> classes. See Recommended Integrations for the comparison table.

Pages we haven’t ported yet

The v3 demo includes pages that haven’t all been recreated for v4. The v4 release notes cover the current page catalog. If you depend on a specific v3 page that hasn’t been ported, please open an issue — community contributions for missing pages are very welcome.

Suggested migration order

For an existing AdminLTE 3 project:

1. Branch first. This is not a small change — keep master on v3 until v4 is stable.
2. Update CSS class names with a find-replace pass using the table above. Most layouts compile but look broken until step 3.
3. Update data-toggle → data-bs-toggle etc. across all your templates.
4. Replace .dark-mode toggle code with data-bs-theme attribute writes.
5. Audit jQuery calls. Either remove them (use the data API) or import plugin classes directly.
6. Swap the third-party plugins using the replacement table above. Do this one widget at a time — it’s the longest step, and each swap is independently testable.
7. Test responsive breakpoints — Bootstrap 5 added xxl. If you use breakpoint-specific utilities, double-check the new scale.
8. Re-test print views — as in v3, printing leaves out the header, sidebar and footer and gives the content the full sheet; data-lte-print="plain" drops the printed link targets and button outlines for pages that print as documents, and data-lte-print="app" prints the whole layout instead. If you had custom print CSS, verify it still works.

Help and discussion

• Migration questions: GitHub Discussions
• Found something we missed? Open an issue tagged migration.