Placeholder

Placeholder Example

Placeholder can be used to work as content placeholder for any element. It can be used to show loading state of any element.

Sample Card for Reference

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

HTML Code for this Element

<div class="card" style="max-width: 240px;">
    <img src="assets/img/abstract-images/abstract-5.jpg" class="card-img-top" alt="...">
  
    <div class="card-body">
      <h5 class="card-title">Sample Card for Reference</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 href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>
  
<div class="card" aria-hidden="true" style="max-width: 240px;">
    <img src="assets/img/grey-img.png" class="card-img-top" alt="..." >
    <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"></a>
    </div>
</div>

Color

By default, the placeholder text inherits the color of the parent element. You can change the color by using utilities or inline styles.

HTML Code for this Element

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

Width

Change the width through grid column classes, utilities or inline styles.

HTML Code for this Element

<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>

Sizing

Change the size of the placeholder text with .placeholder-lg or .placeholder-sm utilities.

HTML Code for this Element

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

Animation

Use .placeholder-glow or .placeholder-wave to show an actively loading element.

HTML Code for this Element

<p class="placeholder-glow">
    <span class="placeholder col-12"></span>
  </p>
  
  <p class="placeholder-wave">
    <span class="placeholder col-12"></span>
  </p>