Miscellaneous Components

The components on this page are the ones AdminLTE adds on top of Bootstrap that aren’t the header, the sidebar or the card. Each is CSS-only unless noted.

Callouts

A bordered note block, tinted per theme colour. Used throughout these docs.

<div class="callout callout-info">
  <h5 class="fw-bold">Heads up</h5>
  <p>Body text. <a href="#" class="callout-link">A link</a>.</p>
</div>

Class	Description
.callout	Base block: padding and a .25rem left border.
.callout-{color}	One per $theme-colors entry. Sets the background, border and text-emphasis colours together.
.callout-link	Bolds a link inside a callout. Plain links and <code> are already tinted to the variant’s emphasis colour, so they stay legible on the subtle background.

Consecutive callouts collapse the gap between them, so a stack reads as one block.

Ribbons

A diagonal banner pinned to the top corner of a positioned ancestor. See the ribbons demo.

<div class="card">
  <div class="ribbon-wrapper">
    <div class="ribbon text-bg-primary">New</div>
  </div>
  <div class="card-body">…</div>
</div>

Class	Description
.ribbon-wrapper	The square that clips the banner. Must sit inside something positioned — .card already is; anything else needs .position-relative.
.ribbon	The banner itself. Colour comes from a .text-bg-* utility.
.ribbon-wrapper.ribbon-lg	Larger corner, 1rem text.
.ribbon-wrapper.ribbon-xl	Largest corner, 1.25rem text.

The banner’s width is derived from --lte-ribbon-size, so overriding that one property rescales the whole thing:

.ribbon-wrapper.ribbon-custom {
  --lte-ribbon-size: 90px;
  --lte-ribbon-width: 130px;
}

Keep labels short. The banner is clipped to the corner square, so only about 64px of it is readable at the default size — roughly six characters. .ribbon-lg and .ribbon-xl give you more room. In RTL the corner and the rotation both mirror, with no extra markup.

Small box

A large stat tile with a background colour, a watermark icon and a footer link.

<div class="small-box text-bg-primary">
  <div class="inner">
    <h3>150</h3>
    <p>New Orders</p>
  </div>
  <svg class="small-box-icon" aria-hidden="true">…</svg>
  <a href="#" class="small-box-footer link-light">More info <i class="bi bi-link-45deg"></i></a>
</div>

Class	Description
.small-box	The tile. Pair with a .text-bg-* utility for colour.
.inner	Holds the figure and its label.
.small-box-icon	Oversized watermark icon, anchored to the trailing edge. Mark it aria-hidden="true".
.small-box-footer	Full-width footer link.

Info box

A compact stat row: icon, label, figure and an optional progress bar.

<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 class="progress">
      <div class="progress-bar" style="width: 70%"></div>
    </div>
    <span class="progress-description">70% increase in 30 days</span>
  </div>
</div>

Class	Description
.info-box	The row.
.info-box-icon	Square icon area. Colour it with .text-bg-*.
.info-box-content	Text column.
.info-box-text	Label. Truncates rather than wrapping.
.info-box-number	The figure.
.info-box-more	Optional trailing link.
.progress-description	Caption under an embedded progress bar.

Timeline

A vertical, dated activity list.

<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">…</div>
      <div class="timeline-footer"><a class="btn btn-primary btn-sm">Read more</a></div>
    </div>
  </div>
</div>

Class	Description
.timeline	The container, drawing the vertical rule.
.time-label	A date marker interrupting the rule.
.timeline-icon	The dot on the rule. Colour it with .text-bg-*.
.timeline-item	The entry’s panel.
.time	Trailing timestamp inside the panel.
.timeline-header / .timeline-body / .timeline-footer	The panel’s three sections. Body and footer are optional.
.timeline-inverse	Flat variant: no shadow, a plain border instead.

Each entry is a bare <div> wrapping the icon and the item — the wrapper carries no class.

Social and post widgets

Profile cards and activity-feed blocks. See the social widgets demo. These keep their v3 class names so migrating markup works unchanged, but they are laid out with grid and flex rather than floats, and take their colours from Bootstrap utilities.

<div class="user-block">
  <img class="rounded-circle" src="user.jpg" alt="">
  <span class="username"><a href="#">Jonathan Burke Jr.</a></span>
  <span class="description">Shared publicly · 7:30 PM today</span>
</div>

Class	Description
.user-block	Avatar, name and meta line from flat markup — the avatar spans both text rows, so no wrapper element is needed. An optional .comment lands on a third row.
.user-block.user-block-sm	Smaller avatar and type, for comment threads.
.post	One entry in a feed. Divided from the next; the last entry drops its divider and trailing space.
.description-block	A centred figure with an uppercase caption — .description-header and .description-text. Repeat across a card footer’s columns.
.widget-user	Profile card with a banner header and an avatar straddling the header/footer seam. Needs .widget-user-header, .widget-user-image, .widget-user-username, .widget-user-desc.
.widget-user-2	Shorter variant with the avatar inline in the header, so long names can wrap.

For .widget-user, the header’s height and the avatar’s size are Sass variables ($lte-widget-user-header-height, $lte-widget-user-image-size); the footer’s top padding is derived from them, so changing one value keeps the overlap correct.

Progress bars

Extra sizes on top of Bootstrap’s .progress.

Class	Height
.progress-sm	10px
.progress-xs	7px
.progress-xxs	3px

.progress.vertical turns a bar on its side, and .progress-group pairs a bar with a label row.

Toasts

.toast-{color} themes a Bootstrap toast per $theme-colors: coloured header, subtle body, matching border. The close button flips to its white variant on dark headers automatically, in both colour modes.

<div class="toast toast-success" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Saved</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">Your changes have been saved.</div>
</div>

Image sizes

.img-size-32, .img-size-50 and .img-size-64 set a width in pixels and leave the height automatic. They exist for avatars in dropdowns and lists, where a Bootstrap sizing utility would need two classes.

Direct chat

The chat panel has its own page — see the DirectChat plugin for its markup and the contacts-pane toggle.