Bootstrap 5Feedback

Bootstrap 5 Placeholder (Skeleton)

Bootstrap 5 Placeholder components (also called skeleton loaders) are animated grey blocks that mimic the shape of content before it loads, giving users immediate visual feedback that something is coming. They replace the jarring experience of blank screens or sudden content jumps by rendering a structural outline of cards, text, buttons, or images. Use them whenever your app fetches data asynchronously — dashboards, feed pages, profile views, or any component driven by an API call.

Primary Class

.placeholder

Common Use Cases

→Rendering skeleton cards in an e-commerce product grid while prices and images load from a headless CMS or Shopify API
→Displaying a skeleton user profile header (avatar circle, name line, bio lines) in a SaaS dashboard while the authenticated user's data is fetched on mount
→Showing skeleton rows inside a data table while a filtered result set is being retrieved from a REST endpoint after the user applies a search query
→Animating skeleton article cards in a news feed or blog listing page while paginated posts are lazy-loaded on scroll

Variants & Classes

Variant	Description	Classes
Placeholder (Skeleton) Default	Standard placeholder (skeleton) with Bootstrap's default styling.	`placeholder`
Placeholder (Skeleton) Responsive	Responsive variant that adapts to different screen sizes.	`placeholder placeholder-responsive`

Code Example

<div class="card" style="max-width: 360px;">
  <div class="card-body">

    <!-- Skeleton avatar + name -->
    <div class="d-flex align-items-center gap-3 mb-3">
      <div class="placeholder-glow">
        <span class="placeholder rounded-circle" style="width:48px;height:48px;display:block;"></span>
      </div>
      <div class="flex-grow-1 placeholder-glow">
        <span class="placeholder col-7 d-block mb-1"></span>
        <span class="placeholder col-5 d-block"></span>
      </div>
    </div>

    <!-- Skeleton body text -->
    <div class="placeholder-glow mb-3">
      <span class="placeholder col-12 d-block mb-1"></span>
      <span class="placeholder col-10 d-block mb-1"></span>
      <span class="placeholder col-8 d-block"></span>
    </div>

    <!-- Skeleton image block -->
    <div class="placeholder-glow mb-3">
      <span class="placeholder col-12 d-block" style="height:160px;border-radius:6px;"></span>
    </div>

    <!-- Skeleton action buttons -->
    <div class="d-flex gap-2 placeholder-glow">
      <a class="btn btn-primary disabled placeholder col-4" aria-disabled="true"></a>
      <a class="btn btn-outline-secondary disabled placeholder col-3" aria-disabled="true"></a>
    </div>

  </div>
</div>

Live Examples

Basic Placeholder (Skeleton)

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated placeholder (skeleton) with custom colours
✓Placeholder (Skeleton) with interactive states
✓Responsive placeholder (skeleton) for all screen sizes

Best Practices

Match skeleton shape to real content dimensions

Set explicit heights on skeleton spans that represent images or avatars (e.g. style="height:160px") so the layout doesn't shift when real content swaps in — this directly improves your Cumulative Layout Shift (CLS) score.

Choose glow over wave for subtlety

Bootstrap 5 offers placeholder-glow (opacity pulse) and placeholder-wave (shimmer sweep). Use placeholder-glow for dense dashboards where multiple skeletons coexist; the simultaneous shimmer of placeholder-wave across many elements can feel distracting.

Vary column widths to look natural

Stagger text line widths using col-12, col-10, col-7 in sequence — uniform full-width lines look artificial and make the skeleton feel broken rather than intentional.

Disable interactive elements during loading

Apply the disabled class alongside placeholder to any button or link skeletons, and add aria-disabled="true" so screen readers correctly communicate that the action is not yet available.

FAQ

How do I replace skeleton placeholders with real content once data loads?

The standard pattern is to conditionally render the skeleton markup when a loading state flag is true, then swap it for the real component once your data promise resolves. In vanilla JS you toggle a CSS class or swap innerHTML; in React/Vue/Alpine you bind the skeleton block to a loading boolean. Bootstrap's placeholder classes are purely presentational — they don't manage state — so the swap logic lives entirely in your JavaScript layer.

Can I change the skeleton colour to match my brand or a dark theme?

Yes. Bootstrap 5 placeholder blocks inherit colour from background utilities, so you can add bg-secondary, bg-dark, or any custom utility to the span element (e.g. <span class="placeholder col-6 bg-primary"></span>). For dark-mode skeletons, override the --bs-placeholder-opacity CSS variable or set a background-color directly in your theme's Sass variables. A common approach is bg-secondary with reduced opacity using the placeholder-glow animation to achieve a subtle dark skeleton on dark backgrounds.

How does Canvas Builder handle Placeholder skeleton generation?

When you describe a loading state or async data component in Canvas Builder, it automatically outputs placeholder markup that mirrors the structural shape of the real component it's replacing — including matched column widths for text lines, correct border-radius for avatar circles, and explicit height values for image blocks. It applies your project's brand colours to the bg- utility classes and wraps everything in placeholder-glow by default, producing responsive skeleton layouts that won't cause layout shift when real content loads.