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 -->
<Card>
<img
src={img1}
class="card-img-top"
alt="card img"
/>
<CardBody>
<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>
<Link
href={null}
class="btn btn-primary"
>Go somewhere</Link
>
</CardBody>
</Card>
<Card>
<img
src={img2}
class="card-img-top"
alt="card dummy img"
/>
<CardBody>
<h5
class="card-title placeholder-glow"
>
<span
class="placeholder col-6"
/>
</h5>
<p
class="card-text placeholder-glow"
>
<span
class="placeholder col-7"
/>
<span
class="placeholder col-4"
/>
<span
class="placeholder col-4"
/>
<span
class="placeholder col-6"
/>
</p>
<Link
href={null}
tabIndex="-1"
class="btn btn-primary disabled placeholder col-6"
/>
</CardBody>
</Card>
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>