Placeholders

  1. Base UI
  2. Placeholders

Default Placeholder

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

card img
Card title

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

Go somewhere 

<!-- Base Examples -->

<div class="card">

    <img src="assets/images/small/img-1.jpg" class="card-img-top" alt="card img">

    

    <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 href="#" class="btn btn-primary">Go somewhere</a>

    </div>

</div>



<div class="card" aria-hidden="true">

    <img src="assets/images/small/img-2.jpg" class="card-img-top" alt="card dummy img">

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

      </p>

      <a href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>

    </div>

</div>

Width

Use w-25,w-50,w-75 or w-100 class to placeholder class to set different widths to the placeholder.


<!-- Width Sizing-->

<div class="live-preview">

    <span class="placeholder col-6"></span>

    <span class="placeholder w-75"></span>

    <span class="placeholder" style="width: 25%;"></span>

</div>

Sizing

Use placeholder-lg, placeholder-sm, or placeholder-xs class to placeholder class to set different size placeholder.


<!-- Sizing -->

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

Color

Use bg- class with the below-mentioned color variation to set a custom color.


<!-- Color -->

<span class="placeholder col-12 mb-3"></span>



<span class="placeholder col-12 mb-3 bg-primary"></span>



<span class="placeholder col-12 mb-3 bg-secondary"></span>



<span class="placeholder col-12 mb-3 bg-success"></span>



<span class="placeholder col-12 mb-3 bg-danger"></span>



<span class="placeholder col-12 mb-3 bg-warning"></span>



<span class="placeholder col-12 mb-3 bg-info"></span>



<span class="placeholder col-12 mb-3 bg-light"></span>



<span class="placeholder col-12 mb-3 bg-dark"></span>
© Velzon.
Design & Develop by Themesbrand