## Placeholders

Use loading placeholders for your components or pages to indicate something may still be loading.

Placeholders on Bootstrap

#### Examples

In the example below, we take a typical card component and recreate it with placeholders applied to create a “loading card”. Size and proportions are the same between the two.

    <div class="d-flex justify-content-center">
      <div class="card overflow-hidden" style="max-width: 20rem;">
        <div class="card-img-top jhj">
          <img class="img-fluid" src="../../assets/img/generic/1.jpg" alt="Card image cap" />
        </div>
        <div class="card-body">
          <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>
          <a class="btn btn-primary btn-sm" href="#!">Go somewhere</a>
        </div>
      </div>
      <div class="card overflow-hidden ms-3" style="width: 20rem;" aria-hidden="true">
        <div class="card-img-top" style="width: 320px;height: 180px"><span class="placeholder w-100 h-100"></span></div>
        <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" href="#" tabindex="-1"></a>
        </div>
      </div>
    </div>

##### Card title

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

Go somewhere

#####

#### Width

You can change the `width` through grid column classes, width utilities, or inline styles.

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

#### Color

By default, the `placeholder` uses `currentColor`. This can be overriden 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-body-highlight"></span>
    <span class="placeholder col-12 bg-dark"></span>

#### Sizing

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

    <span class="placeholder bg-quaternary col-12 placeholder-lg"></span>
    <span class="placeholder bg-quaternary col-12"></span>
    <span class="placeholder bg-quaternary col-12 placeholder-sm"></span>
    <span class="placeholder bg-quaternary col-12 placeholder-xs"></span>

#### 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"></span></p>
    <p class="placeholder-wave"><span class="placeholder col-12"></span></p>

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize