How do I theme a progress bar to use my brand gradient?

Asked on Sep 18, 2025

1 Answer

To theme a Bootstrap progress bar with a custom brand gradient, you can use inline styles or a custom CSS class to apply the gradient background. Here is a simple way to achieve this using inline styles.

<!-- BEGIN COPY / PASTE -->
        <div class="progress">
            <div class="progress-bar" role="progressbar" style="width: 75%; background: linear-gradient(to right, #ff7e5f, #feb47b);" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `progress-bar` div is styled with a `linear-gradient` background to create a gradient effect.
Adjust the `width` style to represent the progress percentage.
Replace `#ff7e5f` and `#feb47b` with your brand's gradient colors.
Ensure the `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` attributes accurately reflect the progress state for accessibility.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions