In the example below, we take a typical card component and recreate it with placeholders applied to create a “loading card”.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<!-- Base Examples -->
<div class="card">
    <img src="assets/images/small/img-1.jpg" class="card-img-top" alt="card img">

    <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's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

<div class="card" aria-hidden="true">
    <img src="assets/images/small/img-2.jpg" class="card-img-top" alt="card dummy img">
    <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>
    </p>
    <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
    </div>
</div>

Use bg- class with the below-mentioned color variation to set a custom color.

<!-- Color -->
<span class="placeholder col-12 mb-3"></span>

<span class="placeholder col-12 mb-3 bg-primary"></span>

<span class="placeholder col-12 mb-3 bg-secondary"></span>

<span class="placeholder col-12 mb-3 bg-success"></span>

<span class="placeholder col-12 mb-3 bg-danger"></span>

<span class="placeholder col-12 mb-3 bg-warning"></span>

<span class="placeholder col-12 mb-3 bg-info"></span>

<span class="placeholder col-12 mb-3 bg-light"></span>

<span class="placeholder col-12 mb-3 bg-dark"></span>