Bootstrap 4 Progress Bar

Bootstrap 4 progress bar can be created by following ways:

Place .progress class to parent container.
Place .progress-bar class to inner container i.e child element of parent container having class .progress.
To set the width of progress bar, you have to use the CSS width property .

Example

General Syntax

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

Try it now

Source Code

          <div class="container mt-4">
  <div class="progress" style="height: 35px;">
    <div class="progress-bar" style="width: 70%;">70%</div>
  </div>
</div>

Try it now

Source Code: Output

70%

To set the height of the progress bar, use inline style sheet inside .progress element and to set width of the progress bar use inline style sheet inside .progress-bar element.

You can provide width and height of progress bar by using CSS. To set the height of the progress bar, use inline style sheet inside .progress element and to set width of the progress bar use inline style sheet inside .progress-bar element.

Creating Progress-bar Label

To create progress-bar label, you have to write progress bar message inside progress bar i.e element containing .progress-bar class.

Example

General Syntax

      <div class="progress" style="height: 60px;">
  <div class="progress-bar" style="width: 60%;">
    Progress Bar Level(60%)
  </div>
</div>

Try it now

Source Code

          <div class="container mt-4">
  <div class="progress" style="height: 35px;">
    <div class="progress-bar" style="width: 60%;">
      60%
    </div>
  </div>
</div>

Try it now

Source Code: Output

60%

Remember: Write progress bar label information inside the <div> having .progress-bar.

Progress Bar Height

Please keep in mind that by default height of the progress bar is 16px. It could be changed by applying the CSS height property to the element containing .progress class.

General Syntax

      <element class="progress" style="height: npx;"> </element>

Try it now

Source Code

          <div class="container mt-4">
  <div class="progress" style="height: 30px;">
    <div class="progress-bar" style="width: 50%;"></div>
  </div>
</div>

Try it now

Source Code: Output

Note: Progress bar height can be changes by assign CSS height property of the element having .progress class.

Bootstrap Striped Progress Bar

Bootstrap striped progress bar can be created very easily by adding extra .progress-bar-striped class to the .progress-bar element.

Example

General Syntax

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

Try it now

Source Code

          <div class="container mt-4">
  <div class="progress" style="height: 35px;">
    <div class="progress-bar progress-bar-striped" style="width: 70%;"></div>
  </div>
</div>

Try it now

Source Code: Output

Attention: To create striped progress bar add .progress-bar-striped to the child element having .progress-bar class.

Animated Progress Bar

Add .progress-bar-striped class to the element having .progress-bar.progress-bar-striped class.

Example

General Syntax

      <element class="progress-bar progress-bar-striped progress-bar-animated"></element>

Try it now

Source Code

          <div class="container mt-4" style="height: 35px;">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 70%;">70%</div>
</div>

Try it now

Source Code: Output

70%

Note: To create animated progress bar use,.progress-bar-animated to the element having .progress-bar class.

Multiple Progress Bars

To create multiple progress bar, put multiple proress bar element having .progress-bar class inside parent container having .progress class.

Example

General Syntax

      <div class="progress">
  <div class="progress-bar bg-*">1</div>
  <div class="progress-bar bg-*">2</div>
</div>

Try it now

Source Code

          <div class="progress mt-4" style="height: 40px;">
  <div class="progress-bar bg-success" style="width: 40%;">
    Success
  </div>
  <div class="progress-bar bg-danger" style="width: 20%;">
    Danger
  </div>
  <div class="progress-bar bg-warning" style="width: 10%;">
    Warning
  </div>
</div>

Try it now

Source Code: Output

    Success
  
    Danger
  
    Warning

Note: Multiple progress bar can be created by assigning multiple progress bar element inside the parent container having .progress class.