Components

AdminLTE 4 adds a small set of dashboard-specific components on top of the full Bootstrap 5.3 component library: cards with tools, small boxes, info boxes, callouts, and timelines. Everything else (modals, dropdowns, alerts, badges, tables) comes straight from Bootstrap.

Component overview

Component	Class	Use
Card	`.card`	Content container with header / body / footer and optional tools.
Small box	`.small-box`	Large stat tile with an icon and a footer link.
Info box	`.info-box`	Compact stat row with an icon, label, and number.
Callout	`.callout`	Bordered note block (info / success / warning / danger).
Timeline	`.timeline`	Vertical activity feed with dated items.
Direct chat	`.direct-chat`	Chat panel with a contacts pane (a card variant).

Cards

A card is Bootstrap's .card with optional color variants (.card-primary, .card-success, …), outline variants (.card-outline), and a .card-tools area in the header. The tool buttons are wired by the CardWidget plugin through data-lte-toggle — collapse, remove, and maximize need no extra JavaScript:

<div class="card card-primary">
  <div class="card-header">
    <h3 class="card-title">Collapsible card</h3>
    <div class="card-tools">
      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
      </button>
      <button type="button" class="btn btn-tool" data-lte-toggle="card-maximize">
        <i class="bi bi-arrows-fullscreen"></i>
      </button>
      <button type="button" class="btn btn-tool" data-lte-toggle="card-remove">
        <i class="bi bi-x-lg"></i>
      </button>
    </div>
  </div>
  <div class="card-body">The body of the card</div>
  <div class="card-footer">Card footer</div>
</div>

`data-lte-toggle`	Action
`card-collapse`	Slide the body / footer up and down.
`card-remove`	Animate the whole card away and remove it.
`card-maximize`	Expand the card to fill the viewport, then restore.

Small box

A bold stat tile, typically four across a row. Uses Bootstrap text-on-background utilities (.text-bg-primary, etc.) for the color:

<div class="small-box text-bg-primary">
  <div class="inner">
    <h3>150</h3>
    <p>New Orders</p>
  </div>
  <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <path d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 ..."></path>
  </svg>
  <a href="#" class="small-box-footer link-light
     link-underline-opacity-0 link-underline-opacity-50-hover">
    More info <i class="bi bi-link-45deg"></i>
  </a>
</div>

Info box

A compact metric row — an icon block, a label, and a number:

<div class="info-box">
  <span class="info-box-icon text-bg-primary shadow-sm">
    <i class="bi bi-gear-fill"></i>
  </span>
  <div class="info-box-content">
    <span class="info-box-text">CPU Traffic</span>
    <span class="info-box-number">10 <small>%</small></span>
  </div>
</div>

Callouts

A bordered note block. The variant suffix sets the accent color: .callout-info, .callout-success, .callout-warning, .callout-danger:

<div class="callout callout-info">
  <h5>I am an info callout</h5>
  Follow the steps to finish setup.
</div>

Timeline

A vertical activity feed. A .time-label marks a date group; each item is an icon plus a .timeline-item card:

<div class="timeline">
  <div class="time-label">
    <span class="text-bg-danger">10 Feb. 2026</span>
  </div>
  <div>
    <i class="timeline-icon bi bi-envelope text-bg-primary"></i>
    <div class="timeline-item">
      <span class="time"><i class="bi bi-clock-fill"></i> 12:05</span>
      <h3 class="timeline-header"><a href="#">Support Team</a> sent you an email</h3>
      <div class="timeline-body">Message body goes here.</div>
      <div class="timeline-footer">
        <a class="btn btn-primary btn-sm">Read more</a>
      </div>
    </div>
  </div>
</div>

JavaScript lifecycle

Since 4.1.0 every AdminLTE component class (PushMenu, Treeview, CardWidget, DirectChat, FullScreen) follows the Bootstrap plugin conventions:

Method	What it does
`Component.getInstance(element)`	Returns the instance attached to the element, or `null`.
`Component.getOrCreateInstance(element, config?)`	Returns the existing instance or creates one with the given config.
`instance.dispose()`	Tears the instance down and releases its element.

import { PushMenu } from 'admin-lte'

// Collapse the sidebar programmatically
PushMenu.getInstance(document.querySelector('.app-sidebar'))?.collapse()

The data API (data-lte-toggle) is delegated at the document level, so markup inserted dynamically — Ajax fragments, Turbo frames, htmx swaps — works immediately, with no re-initialisation.

Client-side rendered layouts

Delegated clicks cover almost everything, but the per-page init pass — the one that wires PushMenu, Treeview and ColorMode to the sidebar — runs on DOMContentLoaded. If your framework builds the layout after that has already fired, into a <body> that persists (GWT and similar widget toolkits), there is nothing in the DOM to wire up at the time. Since 4.2.0 the bundle exports two functions for exactly this:

Function	What it does
`initialize()`	Tears down the previous cycle, then re-runs every plugin's initialisation against the current DOM.
`teardown()`	The inverse — drops the current cycle's window/document listeners without re-initialising.

import { initialize, teardown } from 'admin-lte'

// after your framework has attached the sidebar and menu
initialize()

// when the container unmounts the layout
teardown()

initialize() is safe to call repeatedly — the previous cycle is torn down first, so listeners never stack. Calling it while the document is still loading runs the batch early against whatever DOM exists; the normal DOMContentLoaded pass still replays afterwards against the complete DOM.

You almost certainly do not need this. Server-rendered pages, Ajax fragments, Turbo and htmx are all handled by the delegated data API — reach for initialize() only when the whole layout, sidebar included, is constructed by JavaScript after page load.

Events

Component events are bubbling CustomEvents dispatched on the component's root element. Before-events fire ahead of the action and are cancelable with preventDefault(); after-events fire once the animation completes:

Component	Before (cancelable)	After (animation done)
CardWidget	`collapse/expand/remove.lte.card-widget`	`collapsed/expanded/removed.lte.card-widget`
Treeview	`expand/collapse.lte.treeview`	`expanded/collapsed.lte.treeview`
PushMenu	`open/collapse.lte.push-menu`	`opened/collapsed.lte.push-menu`
ColorMode	—	`changed.lte.color-mode` on `document`, with `detail: { theme, resolved }`

Because the events bubble, one listener on document covers every card on the page — here vetoing a card removal:

document.addEventListener('remove.lte.card-widget', (event) => {
  if (!confirm('Remove this card?')) {
    event.preventDefault() // card stays
  }
})

Because AdminLTE is built on Bootstrap 5.3, the full Bootstrap component set — modals, dropdowns, tabs, accordions, toasts, progress bars, badges, pagination, list groups, alerts — works as documented at getbootstrap.com. AdminLTE only adds the dashboard-specific pieces above.

AdminLTE 4 · HTML port Edit on GitHub