Home Bootstrap 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?

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>

BBS5 Progress Bars

BS5 Progress Bars

Examples

Basic Progress Bar

Progress Bar with Label

Colored Progress Bars

Striped Animated Progress Bar

Test Your Knowledge

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

2. How do you animate a striped progress bar?

Utilizor Digital Network Hub

Productivity Engines

Development Global Reach

Local Ranking Ecosystems

Enterprise Growth Knowledge

BBS5 Progress Bars

BS5 Progress Bars

Examples

Basic Progress Bar

Progress Bar with Label

Colored Progress Bars

Striped Animated Progress Bar

Test Your Knowledge

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

2. How do you animate a striped progress bar?