How do I use placeholders to skeleton-load a card grid?

Asked on Sep 03, 2025

1 Answer

In Bootstrap 5, you can use placeholders to create skeleton screens for a card grid. This helps improve perceived loading times by showing a preview of the content layout.

<!-- BEGIN COPY / PASTE -->
        <div class="row row-cols-1 row-cols-md-3 g-4">
            <div class="col">
                <div class="card">
                    <div class="placeholder-glow">
                        <div class="placeholder card-img-top" style="height: 180px;"></div>
                    </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>
                    </div>
                </div>
            </div>
            <!-- Repeat the above block for more cards -->
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

Use the `placeholder-glow` class to add a glowing effect to placeholders.
The `placeholder` class is used to create the skeleton elements.
Adjust the `col-*` classes to control the width of the placeholder elements.
Repeat the card block to create a grid with multiple skeleton cards.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions