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>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.