Bootstrap 5 — Progress Bar

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add progress bars with Bootstrap 5.

Progress Bar

Bootstrap 5 comes with its own progress bar styles.

We can use them in our app.

To use it, we use the progress class as the wrapper to indicate the max value of the progress.

The progress-bar class indicates the progress so far.

It requires an inline style, utility class, or custom CSS to set the width.

For example, we can write:

<div class="progress">
  <div class="progress-bar"></div>
</div>
<div class="progress">
  <div class="progress-bar" style="width: 20%"></div>
</div>
<div class="progress">
  <div class="progress-bar" style="width: 40%"></div>
</div>
<div class="progress">
  <div class="progress-bar" style="width: 60%"></div>
</div>
<div class="progress">
  <div class="progress-bar" style="width: 80%"></div>
</div>
<div class="progress">
  <div class="progress-bar" style="width: 100%"></div>
</div>

We add progress bar with various amount of it filled with the progress and progress-bar classes.

The progress-bar display a bar for the progress. We set the width style to adjust how much of it is filled.

Alternatively, we can use the width utility classes to set the width.

For instance, we can write:

<div class="progress">
  <div class="progress-bar"></div>
</div>
<div class="progress">
  <div class="progress-bar w-25"></div>
</div>
<div class="progress">
  <div class="progress-bar w-50"></div>
</div>
<div class="progress">
  <div class="progress-bar w-75"></div>
</div>
<div class="progress">
  <div class="progress-bar w-100"></div>
</div>

We use the w-* classes to set the width of the progress bar.

Labels

We can add labels inside the progress bar.

For example, we can write:

<div class="progress">
  <div class="progress-bar"></div>
</div>
<div class="progress">
  <div class="progress-bar w-25">25%</div>
</div>
<div class="progress">
  <div class="progress-bar w-50">50%</div>
</div>
<div class="progress">
  <div class="progress-bar w-75">75%</div>
</div>
<div class="progress">
  <div class="progress-bar w-100">100%</div>
</div>

to display the progress with text inside the bar.

Height

We can set the height style on the element with the progress class.

For example, we can write:

<div class="progress" style="height: 20px;">
  <div class="progress-bar"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar w-25">25%</div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar w-50">50%</div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar w-75">75%</div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar w-100">100%</div>
</div>

Now the height of each bar is 20px high.

Backgrounds

We can use Bootstrap 5 classes to change the background styles.

For example, we can write:

<div class="progress">
  <div class="progress-bar bg-success"></div>
</div>
<div class="progress">
  <div class="progress-bar w-25 bg-info"></div>
</div>
<div class="progress">
  <div class="progress-bar w-50 bg-warning"></div>
</div>
<div class="progress">
  <div class="progress-bar w-75 bg-danger"></div>
</div>
<div class="progress">
  <div class="progress-bar w-100 bg-secondary"></div>
</div>

to change the styles.

Multiple Bars

We can have multiple bars within one progress bar container.

For example, we can write:

<div class="progress">
  <div class="progress-bar" style="width: 15%"></div>
  <div class="progress-bar bg-success" style="width: 35%"></div>
  <div class="progress-bar bg-info" style="width: 20%"></div>
</div>

We set the width style to set the bar of the width.

They’ll automatically be placed side by side.

Striped

Progress bars can have stripes.

To add them, we add the progress-bar-striped class:

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width: 10%"></div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" style="width: 20%"></div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" style="width: 40%"></div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" style="width: 60%" a></div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-striped bg-secondary" style="width: 80%" a></div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" style="width: 100%"></div>
</div>

We added progress bars with various styles.

They all have the progress-bar-striped class to add the stripes to the filled part of the progress bar.

Animated Stripes

The stripes can be animated.

For example, we can write:

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%"></div>
</div>

to animate the stripes with the progress-bar-animated and progress-bar-striped classes.

Conclusion

We can add progress bars with various lengths and styles.

They can also have labels inside it.