Placeholders
Use loading placeholders for your components or pages to indicate something may still be loading.
Placeholders on Bootstrap<div class="d-flex justify-content-center">
<div class="card overflow-hidden" style="max-width: 20rem;">
<div class="card-img-top jhj">
<img class="img-fluid" src="../../assets/img/generic/1.jpg" alt="Card image cap" />
</div>
<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 class="btn btn-primary btn-sm" href="#!">Go somewhere</a>
</div>
</div>
<div class="card overflow-hidden ms-3" style="width: 20rem;" aria-hidden="true">
<div class="card-img-top" style="width: 320px;height: 180px"><span class="placeholder w-100 h-100"></span></div>
<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" href="#" tabindex="-1"></a>
</div>
</div>
</div>
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere<span class="placeholder bg-quaternary col-6"></span>
<span class="placeholder bg-quaternary w-75"></span>
<span class="placeholder bg-quaternary" style="width: 25%;"></span>
<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-body-highlight"></span>
<span class="placeholder col-12 bg-dark"></span>
<span class="placeholder bg-quaternary col-12 placeholder-lg"></span>
<span class="placeholder bg-quaternary col-12"></span>
<span class="placeholder bg-quaternary col-12 placeholder-sm"></span>
<span class="placeholder bg-quaternary col-12 placeholder-xs"></span>