Bootstrap Progress Bars

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

Basic Progress Bar

Steps: to create proress bar:

Step1: Assign .progress to the container.
Step2: Assign .progress-bar to the child element of the container.
Step3: 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="progress">
    <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
 </div>

Try it yourself

Source Code : Output

Progress Bar:Label

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

General Syntax

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

Try It Now

Source Code

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

Try it yourself

Source Code : Output

60%

Note: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 16px.It can also be changed by assigning CSS height property to the .progress element.

General Syntax

      <!-- Progress bar with 20px height -->
<div class="progress" style="height: 25px;">
  <div class="progress-bar" style="width: 50%;">height:25px</div>
</div>

Try It Now

Source Code

    <!-- Progress bar with 1px height -->
<div class="progress mb-2" style="height: 22px;">
  <div class="progress-bar" style="width: 50%;">height:22px</div>
</div>
<!-- Progress bar with 20px height -->
<div class="progress" style="height: 25px;">
  <div class="progress-bar" style="width: 50%;">height:25px</div>
</div>

Try it yourself

Source Code : Output

height:22px

height:25px

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

Progress Bar : Background Color

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

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 mb-2">
   <div class="progress-bar bg-success" style="width: 25%" ></div>
</div>

Try it yourself

Source Code : Output

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.

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="progress">
  <div class="progress-bar" role="progressbar" 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 yourself

Source Code : Output

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 easily by adding .progress-bar-striped class to the .progress-bar.

General Syntax

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

Try It Now

Source Code

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

Try it yourself

Source Code : Output

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

Animated Progress Bar

Add .progress-bar-striped to the .progress-bar element to create an animated progress bar.

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="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 75%;"></div>
</div>

Try it yourself

Source Code : Output

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

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS