Bootstrap5 Progress Bar

A progress bar can show the completion process of a user's task.

The steps to create a basic progress bar are as follows:

• Add one with.progressclass <div>.
• Next, inside the above <div>, add one with class.progress-barempty <div>.
• Add a style attribute with a percentage width, for example style="width:70%"indicates that the progress bar is at70%position.

---

Progress Bar Height

The default height of the progress bar is 16px. We can use CSS'sheightproperty to modify it:

---

Progress Bar Label

You can add text inside the progress bar, such as the percentage of progress:

---

Progress Bars with Different Colors

By default, the progress bar is blue. Bootstrap5 also provides progress bars in the following colors:

---

Striped Progress Bar

You can use the.progress-bar-stripedclass to create a striped progress bar:

---

Animated Progress Bar

Use the.progress-bar-animatedclass to add animation to the progress bar:

---

Mixed Color Progress Bar

The progress bar can be set to multiple colors:

Other Extensions