Placeholders

Basic Example #

In the example below, we take a typical card component and recreate it with placeholders applied to create a "loading card". Size and proportions are the same between the two.

<div class="row">
    <div class="col">
        <div class="card">
            <svg
                class="bd-placeholder-img card-img-top"
                width="100%"
                height="180"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Placeholder"
                preserveAspectRatio="xMidYMid slice"
                focusable="false"
            >
                <title>Placeholder</title>
                <rect width="100%" height="100%" fill="#20c997"></rect>
            </svg>
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">
                    Some quick example text to build on the card title and make up the
                    bulk of the card&#x27;s content.
                </p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card w-20x" aria-hidden="true">
            <svg
                class="bd-placeholder-img card-img-top"
                width="100%"
                height="180"
                xmlns="http://www.w3.org/2000/svg"
                role="img"
                aria-label="Placeholder"
                preserveAspectRatio="xMidYMid slice"
                focusable="false"
            >
                <title>Placeholder</title>
                <rect width="100%" height="100%" fill="#868e96"></rect>
            </svg>
            <div class="card-body">
                <div class="h5 card-title placeholder-glow">
                    <span class="placeholder col-6"></span>
                </div>
                <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
                    href="#"
                    tabindex="-1"
                    class="btn btn-primary disabled placeholder col-6"
                ></a>
            </div>
        </div>
    </div>
</div>

How it works #

Create placeholders with the .placeholder class and a grid column class (e.g., .col-6 ) to set the width . They can replace the text inside an element or as be added as a modifier class to an existing component.

We apply additional styling to .btn s via ::before to ensure the height is respected. You may extend this pattern for other situations as needed, or add a   within the element to reflect the height when actual text is rendered in its place.

<p aria-hidden="true"><span class="placeholder col-6"></span></p>
<a href="#" class="btn btn-primary disabled placeholder col-4" aria-hidden="true"></a>

Width #

You can change the width through grid column classes, width utilities, or inline styles.

<div><span class="placeholder col-6"></span></div>
<div><span class="placeholder w-75"></span></div>
<div><span class="placeholder" style="width: 25%"></span></div>

Color #

By default, the placeholder uses currentColor . This can be overriden with a custom color or utility class.

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

Sizing #

The size of .placeholder s are based on the typographic style of the parent element. Customize them with sizing modifiers: .placeholder-lg , .placeholder-sm , or .placeholder-xs .

<div><span class="placeholder col-12 placeholder-lg"></span></div>
<div><span class="placeholder col-12"></span></div>
<div><span class="placeholder col-12 placeholder-sm"></span></div>
<div><span class="placeholder col-12 placeholder-xs"></span></div>

Animation #

Animate placeholders with .placeholder-glow or .placeholder-wave to better convey the perception of something being actively loaded.

<p class="placeholder-glow"><span class="placeholder col-12"></span></p>
<p class="placeholder-wave"><span class="placeholder col-12"></span></p>