Bootstrap 5 Placeholders

Placeholder Features

<span class="placeholder-glow">
<span class="placeholder-wave">

<span class="placeholder col-6">
<span class="placeholder col-12">

<span class="placeholder bg-primary">
<span class="placeholder bg-secondary">

<div class="card">
  <span class="placeholder"></span>
</div>

🔹 Basic Placeholders

Basic placeholders are created using elements (typically <span>) with the .placeholder class and a column width class like .col-6 to simulate loading content blocks. They use a neutral gray background and automatically inherit typography styles from their parent, ensuring they blend seamlessly into your design system. Placeholders improve perceived performance by showing users that content is on its way, reducing uncertainty and potential bounce rates. For SEO, placeholders themselves have no direct impact, but the improved user experience they provide can lead to better engagement metrics. They should be replaced with actual content as quickly as possible for optimal crawling and indexing.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">
            <span class="placeholder col-6"></span>
        </h5>
        <p class="card-text">
            <span class="placeholder col-7"></span>
            <span class="placeholder col-4"></span>
            <span class="placeholder col-8"></span>
            <span class="placeholder col-6"></span>
        </p>
        <a class="btn btn-primary disabled placeholder col-6"></a>
    </div>
</div>

🔹 Animated Placeholders

Add the .placeholder-glow or .placeholder-wave class to create subtle, moving gradients over your placeholders, indicating an active loading state. This animation provides clearer feedback than a static block, making waits feel shorter and keeping user attention focused. The .placeholder-wave effect is particularly popular as it mimics a shimmering effect across the placeholder. From a UX and SEO perspective, better loading states improve user satisfaction and can decrease abandonment during Ajax calls or slow network conditions. However, use animations sparingly and ensure they are performant to avoid negatively affecting Core Web Vitals like Cumulative Layout Shift (CLS).

<!-- Glow animation -->
<p class="placeholder-glow">
    <span class="placeholder col-12"></span>
    <span class="placeholder col-10"></span>
    <span class="placeholder col-8"></span>
    <span class="placeholder col-6"></span>
</p>

<!-- Wave animation -->
<p class="placeholder-wave">
    <span class="placeholder col-12"></span>
    <span class="placeholder col-10"></span>
    <span class="placeholder col-8"></span>
    <span class="placeholder col-6"></span>
</p>

🔹 Colored Placeholders

Apply contextual colors to placeholders using standard color utility classes like .bg-primary, .bg-success, or their subtle variants (.bg-primary-subtle). This can help differentiate between types of loading content (e.g., a primary-colored placeholder for a main article, a success-colored one for a status indicator) or simply to better match your component's intended final appearance. While primarily visual, colored placeholders contribute to a cohesive and intentional design language during loading states. For performance and SEO, ensure color classes are part of your compiled CSS and don't require additional HTTP requests that could slow down the initial page render.

<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>

🔹 Sizing Placeholders

Control placeholder dimensions precisely using sizing utilities like .placeholder-xs, .placeholder-lg, or grid column classes (.col-*), or set inline width/height styles. Accurate sizing ensures the placeholder occupies the exact space the real content will, preventing jarring layout shifts (CLS) when the content loads—a critical factor for Core Web Vitals and SEO. You can create placeholders for headlines (.h3 .placeholder), images (using aspect ratio utilities), or buttons. Properly sized loaders create a stable, predictable user experience, which search engines reward with better rankings, especially for mobile searches.

<!-- Large placeholder -->
<span class="placeholder col-12 placeholder-lg"></span>

<!-- Default placeholder -->
<span class="placeholder col-12"></span>

<!-- Small placeholder -->
<span class="placeholder col-12 placeholder-sm"></span>

<!-- Extra small placeholder -->
<span class="placeholder col-12 placeholder-xs"></span>

🔹 Card with Placeholders

Simulate a loading card component by combining the card structure with placeholders for the image, title, text, and button areas. Use a .card container with .placeholder elements styled to mimic the card's final content layout. This technique provides users with an accurate preview of the content structure, managing expectations and reducing frustration during data fetching. For SEO, this pattern improves user experience metrics like Time to First Byte (TTFB) perception and reduces bounce rates on content-heavy pages. Ensure the real card content is semantic and fully accessible once loaded to maintain SEO value after the placeholder phase.

<div class="card" style="width: 18rem;">
    <svg class="bd-placeholder-img card-img-top" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" preserveAspectRatio="xMidYMid slice">
        <rect width="100%" height="100%" fill="#868e96"></rect>
    </svg>
    <div class="card-body">
        <h5 class="card-title placeholder-glow">
            <span class="placeholder col-6"></span>
        </h5>
        <p class="card-text placeholder-glow">
            <span class="placeholder col-7"></span>
            <span class="placeholder col-4"></span>
            <span class="placeholder col-4"></span>
            <span class="placeholder col-6"></span>
            <span class="placeholder col-8"></span>
        </p>
        <a class="btn btn-primary disabled placeholder col-6"></a>
    </div>
</div>

🔹 List with Placeholders

Create a loading list by repeating a list item structure containing multiple lines of placeholders, often using a <ul> or <div> container. Each list item might have a placeholder for an avatar, a title (e.g., .col-8), and a subtitle (.col-4). This is ideal for feeds, search results, comments, or data tables. A realistic skeleton list keeps users engaged while waiting for API responses. From an SEO standpoint, it's a best practice for dynamic content loading, as it doesn't hide content from crawlers (the final content is still in the DOM). It simply improves the human user's experience during the fetch-render cycle.

<ul class="list-group">
    <li class="list-group-item">
        <div class="placeholder-glow">
            <span class="placeholder col-7"></span>
        </div>
    </li>
    <li class="list-group-item">
        <div class="placeholder-glow">
            <span class="placeholder col-5"></span>
        </div>
    </li>
    <li class="list-group-item">
        <div class="placeholder-glow">
            <span class="placeholder col-8"></span>
        </div>
    </li>
    <li class="list-group-item">
        <div class="placeholder-glow">
            <span class="placeholder col-6"></span>
        </div>
    </li>
</ul>