Bootstrap Progress Bars

Bootstrap progress bars point to the progress of the current action/task.

Example

Steps: To create a Bootstrap 5 progress bar:

Assign the .progress class to the container.
Assign .progress-bar class to the child element of the container.
To set the width of the progress bar, you have to use the CSS width property.

General Syntax

      <div class="progress">
 <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Try it now

Source Code

          <div class="container mt-4">
  <b class="text-center">Bootstrap Progress Bar</b>
  <div class="row">
    <div class="col-12 col-sm-12">
      <div class="progress mt-5">
        <div class="progress-bar" ></div>
      </div>
    </div>
    <div class="col-12 col-sm-12">
      <div class="progress mt-5">
        <div class="progress-bar"  style="width: 25%;"></div>
      </div>
    </div>
    <div class="col-12 col-sm-12">
      <div class="progress mt-5">
        <div class="progress-bar" style="width: 50%;"></div>
      </div>
    </div>
  </div>
</div>

Try it now

Progress Bar: Label

To create a progress bar label, place text inside the .progress-bar.

Example

60%

General Syntax

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

Try it now

Source Code

          <div class="container mt-4">
  <p class="text-center mt-5">Bootstrap Progress Bar Label</p>
  <div class="progress mt-5 mb-5">
    <div class="progress-bar" style="width: 60%;">60%</div>
  </div> <!--progress-->
</div><!--container-->

Try it now

Code Explanation

To create a progress bar label, assign text information inside the element having .progress-bar class.

Progress Bar:Height

The default height of the progress bar is 16 pixels. It can also be changed by assigning the CSS height property to the .progress element.

Example

height:25px

Source Code

          <div class="container mt-4">
  <p class="text-center mt-4 mb-4">Bootstrap Progress Bar Height</p>
  <!-- Progress bar with 1px height -->
  <div class="progress mt-5" style="height: 22px;">
    <div class="progress-bar" style="width: 50%;">height:22px</div>
  </div>
  <!-- Progress bar with 18px height -->
  <div class="progress mt-5" style="height: 25px;">
    <div class="progress-bar" style="width: 70%;">height:25px</div>
  </div>
</div>
<!--container-->

Try it now

Code Explanation

Progress bar height can be changed by providing CSS height property to the element having .progress.

Progress Bar : Background Color

Bootstrap progress bar background color can be set using background utility classes.

Example

General Syntax

      <div class="progress mb-2">
  <div class="progress-bar bg-success" style="width: 25%;"></div>
</div>

Try it now

Source Code

          <div class="progress mt-4 mb-5">
 <div class="progress-bar bg-success" style="width: 25%;"></div>
</div>

Try it now

Code Explanation

Note: Assign bg-* to the element having .progress-bar to create the different colored progress bar.

Multiple Bars: Inline Progress Bar

It includes more than one progress bar inside a progress component.

Example

General Syntax

      <div class="progress">
  <div class="progress-bar" style="width: 20%;"></div>
  <div class="progress-bar bg-success" style="width: 30%;"></div>
  <div class="progress-bar bg-info" style="width: 40%;"></div>
</div>

Try it now

Source Code

          <div class="container mt-4 mb-4">
  <div class="progress">
    <div class="progress-bar mt-3" style="width: 20%;"></div>
    <div class="progress-bar bg-success mt-3" style="width: 30%;"></div>
    <div class="progress-bar bg-info" style="width: 40%;"></div>
  </div>
</div><!--container-->

Try it now

Code Explanation

Note:To create an Inline Progress Bar, assign all the progress bar elements inside the container having class .progress.

Striped Progress Bar

Bootstrap striped progress bar can be created by adding .progress-bar-striped class to the .progress-bar.

Example

General Syntax

      <div class="progress-bar progress-bar-striped" ></div>

Try it now

Source Code

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

Try it now

Bootstrap 5 Animated Progress Bar

To create a Bootstrap 5 animated progress bar, add .progress-bar-striped class to the .progress-bar element.

Example

General Syntax

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

Try it now

Source Code

          <div class="container mt-4">
  <h2 class="text-center mt-5 mb-5">Animated Progress Bar</h2>
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%;"></div>
  </div> <!--/progress-->
</div><!--container-->

Try it now

Code Explanation

Note:To create animated stripped progress bar assign .progress-bar-animated to the element having .progress-bar class.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Javascript Tutorial JAVASCRIPT

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4