Utilizor
HomeBootstrap 5 BasicsBS5 Progress Bars

BBS5 Progress Bars

Learn how to create progress bars.

BS5 Progress Bars

A progress bar can be used to show how far along a user is in a process.

Bootstrap 5 provides several types of progress bars. The default progress bar requires two elements:

  • A container element with .progress and a specific height.
  • A child element with .progress-bar.

The style attribute with a width percentage sets the completion amount.

Examples

Basic Progress Bar

html/css

A standard progress bar.

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

Progress Bar with Label

html/css

Adding text inside the progress bar.

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

Colored Progress Bars

html/css

Using background colors.

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" style="width:50%"></div>
</div>

Striped Animated Progress Bar

html/css

Adding stripes and animation.

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

Test Your Knowledge

1. Which container class is required for a progress bar?

2. How do you animate a striped progress bar?