How do I show a progress bar inside a card header for task status?

Asked on Jul 07, 2025

1 Answer

To display a progress bar inside a card header for task status using Bootstrap 5, you can utilize the card and progress bar components. Here's a simple example to guide you.

<!-- BEGIN COPY / PASTE -->
        <div class="card">
            <div class="card-header">
                Task Status
                <div class="progress mt-2">
                    <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
                </div>
            </div>
            <div class="card-body">
                <p class="card-text">This is the task description or additional content.</p>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The card header contains the task status title and the progress bar.
The progress bar is set to 50% width, representing the task completion percentage.
Adjust the `aria-valuenow` and `style` attributes to reflect the actual progress percentage.
The card body can contain additional information or description related to the task.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions