Placeholders

Overview #

Placeholders can be used to enhance the experience of your application. They're built only with HTML and CSS, meaning you don't need any JavaScript to create them. You will, however, need some custom JavaScript to toggle their visibility. Their appearance, color, and sizing can be easily customized with our utility classes.

Here's an example of a loading card that can be used to transition to an actual product card. Size and proportions are the same between the two.

Cool Neon Kicks

$129 $200

Add to bag

<!-- Loading card -->
<div class="card specific-w-300 mw-100 mx-auto">
  <div class="card-img-top placeholder opacity-25 w-100" style="height: 240px;"></div>
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-7"></span>
    </h5>
    <p class="fs-5 card-text placeholder-glow">
      <span class="placeholder col-3 bg-success"></span>
      <span class="placeholder col-3"></span>
    </p>
    <a class="btn btn-success btn-lg w-100 disabled placeholder"></a>
  </div>
</div>

<!-- Actual product card -->
<div class="card specific-w-300 mw-100 mx-auto">
  <img src="..." class="card-img-top" alt="..." height="240">
  <div class="card-body">
    <h5 class="card-title">Cool Neon Kicks</h5>
    <p class="card-text fs-5 d-flex align-items-center">
      <strong class="text-success-emphasis me-2">$129</strong>
      <s class="fs-6 text-body-secondary">$200</s>
    </p>
    <a href="#" class="stretched-link btn btn-success btn-lg w-100">
      <i class="fa-light fa-bag-shopping me-1"></i> Add to bag
    </a>
  </div>
</div>

Please note, the icon being used is taken from the Font Awesome icon library (opens in new tab).

How it works #

Create placeholders with the .placeholder class and a grid column class (e.g., .col-6) to set the width. They can replace the text inside an element or be added as a modifier class to an existing component.

We apply additional styling to .btn components via ::before to ensure the height is respected. You may extend this pattern for other situations as needed, or add a non-breaking space ( ) within the element to reflect the height when actual text is rendered in its place.

<p aria-hidden="true">
  <span class="placeholder col-12"></span>
  <span class="placeholder col-12"></span>
  <span class="placeholder col-6"></span>
</p>
<div class="text-end">
  <a class="btn btn-primary disabled placeholder col-4"></a>
</div>

How it works Width #

You can change the width of placeholders through grid column classes, width utilities, or inline styles. By default, placeholders will stack horizontally (if there is enough space). Therefore, if you need each placeholder to take up a new line, you can use <br />.

<span class="placeholder col-12"></span>
<span class="placeholder col-9"></span>
<span class="placeholder w-50"></span><br />
<span class="placeholder" style="width: 25%;"></span>

How it works Color #

By default, placeholders use currentColor. This can be overridden with a custom color or utility class.

<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>

How it works Sizing #

The size of placeholders are based on the typographic style of the parent element. You can customize them with sizing modifiers: .placeholder-lg, .placeholder-sm, or .placeholder-xs.

<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>

How it works Animation #

Animate placeholders with .placeholder-glow or .placeholder-wave to better convey the perception of something being actively loaded.

<!-- Placeholder glow -->
<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
  <span class="placeholder col-12"></span>
  <span class="placeholder placeholder-lg bg-primary col-4"></span>
</p>

<!-- Placeholder wave -->
<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
  <span class="placeholder col-12"></span>
  <span class="placeholder placeholder-lg bg-primary col-4"></span>
</p>

These animation classes are fairly versatile and can be used with other components, such as the progress as a loader.