Skip to main content

Progress Bars in Bootstrap 5

Bootstrap Progress Bars​

Bootstrap provides progress bars that display the progress of a task. Progress bars are commonly used in web applications to show the status of an ongoing operation such as uploading files or loading content.

To create a progress bar you can use the .progress class, along with the .progress-bar class.

As an example:

Editor

Loading...

In this example:

  • We've created a progress bar with a width of 50%.
  • The role="progressbar" attribute is used to define the element as a progress bar, and the aria-valuenow, aria-valuemin, and aria-valuemax attributes define the current, minimum, and maximum values for the progress bar, respectively.

Text Inside Progressbar​

You can also add text inside the progress bar to indicate the percentage of completion.

To do this, you can add a span element with the .progress-bar-text class inside the div element with the .progress-bar class.

As an example:

Editor

Loading...

In this example:

  • We've added the text "75%" inside the progress bar to show the percentage of completion.

Customize Progress Bar​

Bootstrap also provides various color classes that you can use to customize the appearance of the progress bar.

As an example:

Editor

Loading...

In this example:

  • We have creates a progress bar with a green background color using the .bg-success class.

Progress Bar Height​

Bootstrap Progress Bars have a default height of 1.5rem (or 24 pixels) but can be adjusted by modifying the height property of the .progress class in CSS.

As an example:

To set the height of all progress bars to 2rem, you can add the following CSS.

.progress {
     height: 2rem;
}

Animated Progress Bar​

You can use the .progress-bar-animated class to add an animation effect to the progress bar.

As an example:

Editor

Loading...

In this example:

  • The progress-bar-animated class is added to the progress bar element to make it animate.

Multiple Progress Bars​

You can create multiple progress bars in Bootstrap by adding multiple .progress-bar elements inside a .progress container.

As an example:

Editor

Loading...