How can I display placeholders while fetching API data in a table?

Asked on Sep 04, 2025

1 Answer

To display placeholders while fetching API data in a table using Bootstrap 5, you can utilize the Bootstrap placeholder component. This allows you to show a loading state until the data is fully loaded.

<!-- BEGIN COPY / PASTE -->
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Name</th>
                    <th scope="col">Email</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">
                        <span class="placeholder col-1"></span>
                    </th>
                    <td>
                        <span class="placeholder col-4"></span>
                    </td>
                    <td>
                        <span class="placeholder col-6"></span>
                    </td>
                </tr>
                <tr>
                    <th scope="row">
                        <span class="placeholder col-1"></span>
                    </th>
                    <td>
                        <span class="placeholder col-4"></span>
                    </td>
                    <td>
                        <span class="placeholder col-6"></span>
                    </td>
                </tr>
                <!-- Repeat rows as needed -->
            </tbody>
        </table>
        <!-- END COPY / PASTE -->

Additional Comment:

Use the `table` class to create a basic table structure.
The `placeholder` class is used to create the loading effect.
Adjust `col-1`, `col-4`, `col-6` to fit the width of your actual data.
Replace the placeholders with real data once the API call is complete.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions