Placeholders

Placeholder Cards

In the example below, we take a typical card component and recreate it with placeholders applied to create a loading card and create placeholders with the placeholder class.

<div class="row gy-3">
 <div class="col-sm-6">
   <div class="card mb-0 h-100" aria-hidden="true"><img class="card-img-top img-fluid" src="../assets/images/masonry/5.jpg" alt="#">
     <div class="card-body">
       <h6 class="card-title">Card Title</h6>
       <p class="card-text c-o-light">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a class="btn btn-primary" href="#!">Go somewhere</a>
     </div>
   </div>
 </div>
 <div class="col-sm-6">
   <div class="card mb-0 h-100" aria-hidden="true"><img class="card-img-top img-fluid" src="../assets/images/masonry/13.jpg" alt="#">
     <div class="card-body">
       <h6 class="card-title placeholder-glow"><span class="placeholder col-6 placeholder-light"></span></h6>
       <div class="card-text placeholder-glow mb-3">
         <div class="placeholder col-7 placeholder-light"></div>
         <div class="placeholder col-4 placeholder-light"></div>
         <div class="placeholder col-4 placeholder-light"></div>
         <div class="placeholder col-6 placeholder-light"></div>
         <div class="placeholder col-8 placeholder-light"></div>
       </div><a class="btn btn-primary disabled placeholder col-6" href="#!"></a>
     </div>
   </div>
 </div>
</div>

Width & Sizing

placeholder class + grid column (e.g., col-6) sets width. Works as text replacement or modifier class.Create flexible placeholders: placeholder + grid for width. Replace text or modify components.

Width

You can change the width through grid column classes, width utilities, or inline styles. (like: w-25, w-50, w-75, w-100 )

Sizing

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

<div class="row g-3">
 <div class="col-xxl-12 col-md-6 box-col-6"> 
   <div class="card-wrapper border rounded-3 h-100">
     <h6 class="sub-title pb-1">Width</h6>
     <p class="f-m-light">You can change the width through grid column classes, width utilities, or inline styles.
       <code> (like: w-25 , w-50 , w-75 , w-100 )</code>
     </p>
     <div class="card-body p-0 placeholder-glow">
       <span class="placeholder w-50 placeholder-light"></span>
       <span class="placeholder w-75 placeholder-light"></span>
       <span class="placeholder w-100 placeholder-light"></span>
       <span class="placeholder w-25 placeholder-light"></span>
     </div>
   </div>
 </div>
 <div class="col-xxl-12 col-md-6 box-col-6"> 
   <div class="card-wrapper border rounded-3 h-100">
     <h6 class="sub-title pb-1">Sizing</h6>
     <p class="f-m-light">The size of
       <code>placeholder</code> are based on the typographic style of the parent element. Customize them with sizing modifiers:<code>placeholder-lg, placeholder-sm, or placeholder-xs</code>.
     </p>
     <div class="card-body p-0 placeholder-glow">
       <span class="placeholder col-12 placeholder-lg placeholder-light"></span>
       <span class="placeholder col-12 placeholder-light"></span>
       <span class="placeholder col-12 placeholder-sm placeholder-light"></span>
       <span class="placeholder col-12 placeholder-xs placeholder-light"></span>
     </div>
   </div>
 </div>
</div>

Animation

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

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

Custom Animation Placeholder

With the wave-left-lines custom animation, placeholders may be used into your unique design.

<div class="row gy-3"> 
 <div class="col-sm-6">
   <div class="placeholder-body">
     <div class="placeholder-start">
       <div class="square"></div>
     </div>
     <div class="placeholder-end">
       <div class="placeholder-line placeholder-h-17 w-25 mb-2"></div>
       <div class="placeholder-line"></div>
       <div class="placeholder-line placeholder-h-8 w-50"></div>
       <div class="placeholder-line w-75"></div>
     </div>
   </div>
 </div>
 <div class="col-sm-6">
   <div class="placeholder-body">
     <div class="placeholder-start">
       <div class="square circle"></div>
     </div>
     <div class="placeholder-end">
       <div class="placeholder-line placeholder-h-17 w-25 mb-2"></div>
       <div class="placeholder-line"></div>
       <div class="placeholder-line placeholder-h-8 w-50"></div>
       <div class="placeholder-line w-75"></div>
     </div>
   </div>
 </div>
</div>

Colors

By default, the placeholder uses currentcolor. This can be overridden with a custom color or utility class.

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