Skip to component content

Skeleton

Show loading structure with Bootstrap-native placeholders so lists, cards, and tables stay stable while data fetches.

Usage

Use .placeholder when a region has not loaded yet but its final structure is already known. Add placeholder shapes where the final avatar, line, field, card media, or table cell will appear, and keep their dimensions close to the loaded content so the page does not jump when data arrives.

Control width with grid column classes, width utilities, or an explicit width; control height from the parent text size or with a fixed height when the placeholder stands in for media or controls. Bootstrap placeholders inherit currentColor, can be recolored with background utilities, and can use size modifiers such as .placeholder-lg, .placeholder-sm, and .placeholder-xs.

Use .placeholder-glow or .placeholder-wave only when motion helps communicate active loading. Keep skeleton-only markup hidden from assistive technology with aria-hidden, then replace it with the real content and announce the update from the owning view when the change matters to screen reader users.

Basic

Use precise width/height values to reserve space before the final copy is available.

Skeleton 
<div
  class="skeleton placeholder-glow"
  aria-hidden="true"
  style="width: 9.5rem; height: 1rem;"
>
  <span class="placeholder" style="width: 100%; height: 100%"></span>
</div>

Profile row

Pair a circular avatar placeholder with name and role lines while a workspace member loads.

Skeleton 
<div class="d-flex align-items-center gap-3">
  <div
    class="skeleton placeholder-glow rounded-circle flex-shrink-0"
    aria-hidden="true"
    style="width: 2.5rem; height: 2.5rem;"
  >
    <span class="placeholder" style="width: 100%; height: 100%"></span>
  </div>
  <div class="d-grid gap-2">
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 10rem; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 6.5rem; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
  </div>
</div>

Card

Keep the card frame and metadata rhythm consistent while a feed card prepares on the page.

Skeleton 
<div class="d-grid gap-3" style="width: 18rem;">
  <div
    class="skeleton placeholder-glow"
    aria-hidden="true"
    style="width: 18rem; height: 8rem;"
  >
    <span class="placeholder" style="width: 100%; height: 100%"></span>
  </div>
  <div class="d-grid gap-2">
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 13rem; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 10rem; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
  </div>
</div>

Text block

Use varying line lengths to preserve paragraph alignment when prose arrives.

Skeleton 
<div class="d-grid gap-2" style="width: 18rem;">
  <div
    class="skeleton placeholder-glow"
    aria-hidden="true"
    style="width: 100%; height: 1rem;"
  >
    <span class="placeholder" style="width: 100%; height: 100%"></span>
  </div>
  <div
    class="skeleton placeholder-glow"
    aria-hidden="true"
    style="width: 95%; height: .875rem;"
  >
    <span class="placeholder" style="width: 100%; height: 100%"></span>
  </div>
  <div
    class="skeleton placeholder-glow"
    aria-hidden="true"
    style="width: 85%; height: .875rem;"
  >
    <span class="placeholder" style="width: 100%; height: 100%"></span>
  </div>
  <div
    class="skeleton placeholder-glow"
    aria-hidden="true"
    style="width: 72%; height: .875rem;"
  >
    <span class="placeholder" style="width: 100%; height: 100%"></span>
  </div>
</div>

Form

Hold labels and control height while a billing form is still resolving.

Skeleton 
<div class="d-grid gap-3" style="width: 16rem;">
  <div class="d-grid gap-2">
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 5rem; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 100%; height: 2rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
  </div>
  <div class="d-grid gap-2">
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 6rem; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 100%; height: 2rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
  </div>
  <div
    class="skeleton placeholder-glow"
    aria-hidden="true"
    style="width: 6rem; height: 2rem;"
  >
    <span class="placeholder" style="width: 100%; height: 100%"></span>
  </div>
</div>

List rows

Hold row height for a repeated list, such as a support triage queue, while it loads.

Skeleton 
<div class="d-grid gap-2" style="width: 20rem;">
  <div class="d-flex align-items-center gap-3">
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 4rem; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow flex-grow-1"
      aria-hidden="true"
      style="width: 100%; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 3.25rem; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
  </div>
  <div class="d-flex align-items-center gap-3">
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 4rem; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow flex-grow-1"
      aria-hidden="true"
      style="width: 100%; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 3.25rem; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
  </div>
  <div class="d-flex align-items-center gap-3">
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 4rem; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow flex-grow-1"
      aria-hidden="true"
      style="width: 100%; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 3.25rem; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
  </div>
  <div class="d-flex align-items-center gap-3">
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 4rem; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow flex-grow-1"
      aria-hidden="true"
      style="width: 100%; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 3.25rem; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
  </div>
</div>

Table rows

Represent headers and rows with matching geometry so sorting and selection actions can appear without jump.

Skeleton 
<div class="d-grid gap-2" style="width: 20rem;">
  <div class="d-flex gap-3">
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 4rem; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 8rem; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 5.25rem; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
  </div>
  <div class="d-flex gap-3">
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 4rem; height: .75rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow flex-grow-1"
      aria-hidden="true"
      style="width: 100%; height: .75rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 4.5rem; height: .75rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
  </div>
  <div class="d-flex gap-3">
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 4rem; height: .75rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow flex-grow-1"
      aria-hidden="true"
      style="width: 100%; height: .75rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 4.5rem; height: .75rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
  </div>
  <div class="d-flex gap-3">
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 4rem; height: .75rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow flex-grow-1"
      aria-hidden="true"
      style="width: 100%; height: .75rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 4.5rem; height: .75rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
  </div>
  <div class="d-flex gap-3">
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 7.25rem; height: .75rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 4.5rem; height: .75rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 3.25rem; height: .75rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
  </div>
</div>

RTL

Use the same skeleton arrangement in Arabic, Hebrew, and English while mirroring direction only.

<div class="d-flex align-items-center gap-3" dir="rtl">
  <div
    class="skeleton placeholder-glow rounded-circle flex-shrink-0"
    aria-hidden="true"
    style="width: 2.5rem; height: 2.5rem;"
  >
    <span class="placeholder" style="width: 100%; height: 100%"></span>
  </div>
  <div class="d-grid gap-2">
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 10rem; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 6.5rem; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
  </div>
</div>
<div class="d-flex align-items-center gap-3" dir="rtl">
  <div
    class="skeleton placeholder-glow rounded-circle flex-shrink-0"
    aria-hidden="true"
    style="width: 2.5rem; height: 2.5rem;"
  >
    <span class="placeholder" style="width: 100%; height: 100%"></span>
  </div>
  <div class="d-grid gap-2">
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 10rem; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 6.5rem; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
  </div>
</div>
<div class="d-flex align-items-center gap-3" dir="ltr">
  <div
    class="skeleton placeholder-glow rounded-circle flex-shrink-0"
    aria-hidden="true"
    style="width: 2.5rem; height: 2.5rem;"
  >
    <span class="placeholder" style="width: 100%; height: 100%"></span>
  </div>
  <div class="d-grid gap-2">
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 10rem; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
    <div
      class="skeleton placeholder-glow"
      aria-hidden="true"
      style="width: 6.5rem; height: .875rem;"
    >
      <span class="placeholder" style="width: 100%; height: 100%"></span>
    </div>
  </div>
</div>

Component reference

Status
Accepted
Runtime
native HTML/CSS
Markup
Moo UI documented extension
Reference

For native animation and sizing options, see the Bootstrap Placeholder documentation.

Pages
Home Introduction Installation Layout Examples Account Appearance FAQ Forgot Password Overview Pricing Profile Sign In Sign Up Tasks Users Components Blocks Charts Utilities Support & Evidence Contributing AI Usage Changelog License
Components
Accordion Alert Alert Dialog Avatar Badge Breadcrumb Button Button Group Card Chart Checkbox Close Button Collapsible Combobox Context Menu Data Table Date Picker Dialog Dropdown Menu Empty Field Form Input Input Group Kbd Menubar Native Select Navigation Pagination Popover Progress Radio Group Separator Sheet Sidebar Skeleton Slider Spinner Switch Table Table of Contents Tabs Textarea Toast Toggle Group Tooltip Typography
Utilities
Border Scroll Fade
Blocks
Accordion Panels Sidebar (Floating) Sidebar (Inset)
↵ Go to Page

Settings

Theme
Choose how Moo UI looks on this device.
Sidebar
Choose how the sidebar sits on the page.
Theme Builder
Tune catalog tokens and chart colors for this browser.
Base color
Theme color
Chart color
Heading font
Body font
Radius
Direction
Choose the reading direction. RTL flips the layout live.
Reset

Restore the default appearance.