Bootstrap4 Progress Bar

Progress bars can display the completion progress of user tasks.

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

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

---

Progress Bar Height

The progress bar height is 16px by default. We can use CSSheightproperty 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. Bootstrap4 also provides progress bars with the following colors:

---

Striped Progress Bar

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

---

Animated Progress Bar

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

---

Mixed Color Progress Bar

Progress bars can be set to multiple colors:

Other Extensions