Placeholders
Default Placeholder
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="build/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="build/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>
Width
Use w-25,w-50,w-75 or w-100 class to placeholder
class to set different widths to the placeholder.
<!-- Width Sizing-->
<div class="live-preview">
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
</div>
Sizing
Use placeholder-lg, placeholder-sm, or
placeholder-xs class to placeholder class to set different size placeholder.
<!-- Sizing --> <span class="placeholder col-12 placeholder-lg"></span><span class="placeholder col-12"></span><span class="placeholder col-12 placeholder-sm"></span><span class="placeholder col-12 placeholder-xs"></span>
Color
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>