Main Menu

Placeholders

Lorem ipsum dolor sit amet

Basic

    <div class="card border-0" aria-hidden="true" style="max-width: 20rem;">
        <figure class="placeholder-glow">
            <img src="https://placehold.jp/300x300.png" class="card-img-top placeholder" alt="...">
        </figure>
        <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 href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
        </div>
    </div>
Animation


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

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

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