Google Ad Slot: content-top

Bootstrap 5 Progress Bar

~1 min read · Bootstrap

On this page

Progress bars in Bootstrap 5 provide a visual representation of progress or completion percentage. They are customizable and easy to use with different styles, animations, and stacked configurations.

Example

Try it yourself

Progress Bar Height:

Use the CSS height property to change it:

Example

Try it yourself

Progress Bar with Different Background Colors:

Bootstrap provides contextual classes to style progress bars.

Example

Try it yourself

Striped Progress Bar:

Use .progress-bar-striped to add stripes to the progress bar.

Example

60%

Try it yourself

Animated Progress Bar:

Add .progress-bar-animated to create an animated effect.

Example

80%

Try it yourself

Multiple Progress Bars:

You can stack multiple progress bars by placing multiple .progress-bar elements inside a single .progress container.

Example

Try it yourself

❮ Previous Next ❯

Formatter

Design

Editor

Generator

Converter

Tester

Search

Welcome Back

Create Account

Forgot Password

Bootstrap 5 Progress Bar

Progress Bar Height:

Progress Bar with Different Background Colors:

Striped Progress Bar:

Animated Progress Bar:

Multiple Progress Bars:

Cookie Consent & Privacy Preferences