Placeholder
Placeholder.
Make use of Bootstrap's unique placeholder styles to create visually consistent loading states that keep your interface looking polished while data is being loaded.
Placeholder on Bootstrap
Card title
He lay on his armour-like back, and if he lifted his head a little
<div class="card">
<img class="card-img-top img-fluid" src="images/card/2.png" alt="Card image cap">
<div class="card-body">
<p class="card-text">He lay on his armour-like back, and if he lifted his head a little
</p>
</div>
<div class="card-footer">
<p class="card-text d-inline">Card footer</p>
<a href="javascript:void(0);" class="card-link float-end">Card link</a>
</div>
</div>
<div class="card" aria-hidden="true">
<img class="card-img-top img-fluid" src="images/card/4.png" alt="Card image cap">
<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 class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
</div>
Placeholder Width
<div class="card" aria-hidden="true">
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
</div>
Placeholder Animation
<div class="card" aria-hidden="true">
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
</div>
Placeholder Sizes
<div class="card" aria-hidden="true">
<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>
</div>
Placeholder Colors
<div class="card" aria-hidden="true">
<span class="placeholder col-12"></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-light"></span>
<span class="placeholder col-12 bg-dark"></span>
</div>