Skeletons

Empty Elements

When an element has the .skeleton class applied, it will by default have a skeleton animation attached during its :empty state. This component does not exist in Bootstrap by default.

Please refer to these docs for more info on the :empty pseudo-class.

Skeletons are applied to all <img> elements by default, because these register as “empty” since images have no children.

In addition, there are also skeleton elements with predetermined heights and widths for h1’s (using .h1-skeleton) and descriptions (using .p-skeleton). We can add more as needed.

You could make a skeleton for any element using the .skeleton class (to get the animation) and then manually declaring the height and width.

Examples

H1 Skeleton

<h1 class="h1-skeleton"></h1>

Description Skeleton

<div class="col-12 col-lg-8">
  <p class="p-skeleton"></p>
</div>

Default skeleton for images

All images get skeletons by default, because these register as “empty” since images have no children. When building out certain skeleton images, you can give them a set height/width, or just allow them to fill the parent.

<img style="width:150px; height:150px;"/>

You can also “opt out” of an img having a skeleton using the .no-skeleton class.

<img class="no-skeleton" style="width:150px; height:150px;"/>

Using the .skeleton class

Animation will be applied to any empty element with the .skeleton class.

<div class="skeleton my-1" style="width:100%; height:30px;"></div>
<div class="skeleton my-1" style="width:100%; height:30px;"></div>

For example, .skeleton could be used to imitate a desktop leaderboard ad.

<div class="w-100 bg-800 justify-content-center align-items-center d-none d-lg-flex">
  <div class="leaderboard-center skeleton my-3" style="height: 90px; width: 728px;"></div>
</div>