Creating and Customizing Progress Bars with Bootstrap: A Simple Guide to Visual Progress Indicators

Learn how to easily implement and customize progress bars in your Bootstrap projects. This tutorial provides a step-by-step guide to creating basic progress bars, setting progress values, adding colors, and enhancing accessibility for a user-friendly progress display.

Creating Progress Bars with Bootstrap

Understanding Bootstrap Progress Bars

Bootstrap progress bars visually represent the progress of a task or process. They're simple to implement and highly customizable, offering a user-friendly way to display progress in your web applications. They are useful for showing loading progress, upload status, or the completion of a multi-step process.

Basic Progress Bar

To create a basic progress bar, you use a <div> with the class .progress. Inside, you add a child <div> with the class .progress-bar to represent the progress indicator. The width of this inner <div> determines the amount of progress displayed. This inner `div` is the progress indicator. The `aria-valuemin`, `aria-valuemax`, and `aria-valuenow` attributes are important for accessibility.

Example HTML

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70% Complete</div>
</div>

Progress Bars with Labels

To display the percentage complete, remove the `sr-only` class from the progress bar's inner `div`.

Example HTML

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70%</div>
</div>

Colored Progress Bars

Bootstrap provides contextual classes to add color to progress bars:

  • .progress-bar-success
  • .progress-bar-info
  • .progress-bar-warning
  • .progress-bar-danger

These are applied to the inner .progress-bar element.

Striped Progress Bars

Add stripes to progress bars using the .progress-bar-striped class.

Animated Progress Bars

To create an animated progress bar, add the `active` class to the inner .progress-bar element.

Stacked Progress Bars

Create stacked (multi-colored) progress bars by adding multiple .progress-bar elements within the same .progress container.

Bootstrap 4 Progress Bar Styles

Bootstrap 4 adds these progress bar color options:

  • .progress-bar-white
  • .progress-bar-secondary
  • .progress-bar-light
  • .progress-bar-dark