Bootstrap 5Feedback

Bootstrap 5 Placeholder (Skeleton)

Bootstrap 5 Placeholders (also called skeleton screens) are loading-state UI elements that mimic the shape and layout of real content before it finishes loading. They replace the traditional spinner by showing a structural preview of the incoming content, reducing perceived load time. Use them whenever content is fetched asynchronously — such as API-driven cards, user profiles, or data tables.

Primary Class

.placeholder

Common Use Cases

→Displaying skeleton versions of product cards in an e-commerce listing page while prices and images load from a REST API
→Showing a placeholder profile block (avatar circle, name line, bio lines) inside a social feed while user data is retrieved after login
→Rendering a skeleton table with muted row placeholders in an admin dashboard while server-side paginated data is fetched
→Filling a blog article preview grid with skeleton cards during the initial page hydration of a server-side rendered Next.js or similar app

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="width: 20rem;" aria-hidden="true">
  <div class="card-body">
    <div class="d-flex align-items-center mb-3">
      <span class="placeholder rounded-circle me-3" style="width:48px;height:48px;"></span>
      <div class="flex-grow-1">
        <p class="placeholder-glow mb-1">
          <span class="placeholder col-7"></span>
        </p>
        <p class="placeholder-glow mb-0">
          <span class="placeholder col-4 placeholder-sm"></span>
        </p>
      </div>
    </div>
    <p class="placeholder-glow">
      <span class="placeholder col-12 mb-1"></span>
      <span class="placeholder col-10 mb-1"></span>
      <span class="placeholder col-8"></span>
    </p>
    <a class="btn btn-primary disabled placeholder col-6 mt-2" role="button" aria-disabled="true"></a>
  </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

Always add aria-hidden="true" to skeleton containers

Screen readers should never announce placeholder elements as real content — add aria-hidden="true" to the outermost skeleton wrapper so assistive technology skips it entirely while real content loads.

Use placeholder-glow for perceived motion without animation overhead

The placeholder-glow class applies a subtle pulsing opacity animation via CSS only — no JavaScript required — making it preferable to custom keyframe animations for performance-sensitive pages.

Match skeleton col widths to your real content proportions

Use varying col widths (e.g., col-12, col-8, col-5) rather than uniform widths so the skeleton closely mirrors the actual text line lengths, which significantly improves the visual transition when real content appears.

Disable interactive elements inside skeletons with the disabled class

Any buttons or links inside a skeleton block should carry both the disabled and placeholder classes — this prevents accidental clicks and visually signals the non-interactive state without extra JavaScript.

FAQ

What is the difference between placeholder-glow and placeholder-wave?

Both are animation modifier classes applied to a parent element. placeholder-glow animates the opacity of child placeholder spans, creating a fading pulse effect. placeholder-wave slides a highlight across the spans from left to right, similar to the shimmer effect popularised by Facebook's skeleton screens. Choose placeholder-wave for a more distinct loading indication; choose placeholder-glow for something subtler that blends into minimal UI designs.

How do I control the height and colour of individual placeholder spans?

By default, placeholder spans inherit their height from font-size, so placeholder-lg and placeholder-sm utility classes adjust size. For custom heights, apply an inline style or a utility class like style='height: 1.5rem;'. Colour is controlled via Bootstrap background colour utilities — e.g., adding bg-secondary or bg-dark to the span itself overrides the default muted grey, letting you match your brand's loading aesthetic.

How does Canvas Builder handle Placeholder components when generating a site?

Canvas Builder automatically inserts Placeholder skeleton blocks into any section that references dynamic or async data — such as pricing cards pulled from a CMS, team grids, or testimonial carousels. The generated skeletons mirror the exact column structure and element sizing of the real components, and brand colours defined in your Canvas theme are applied to the placeholder background tints so the loading state looks native to your site rather than generic grey.