Bootstrap 4
  Prev Page
Next Page  
Bootstrap 4 Progress Bars
Bootstrap 4 progress bars featuring support for stacked bars, animated backgrounds, and text labels. To create a default progress bar, add a .progress class to a container element and and the .progress-bar class to its child element. 
Use the CSS width property to set the width of the progress bar. The .progress-bar also requires some role and aria attributes to make it accessible.
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Output :
Progress Bars with Labels

Add labels to your progress bars text inside to show the visible percentage.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<br />
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>
<br />
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75%</div>
</div>
<br />
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
</div>
Output :
Progress Bars Height

The heightcode> of the progress bar is 16px by default. Use the CSS heightcode> property to change it.

<div class="progress" style="height:5px">
  <div class="progress-bar" role="progressbar" style="width: 20%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress" style="height:10px">
  <div class="progress-bar" role="progressbar" style="width: 40%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress" style="height:15px">
  <div class="progress-bar" role="progressbar" style="width: 60%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress" style="height:20px">
  <div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress" style="height:25px">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Output :
Background Color Progress Bars

By default progress bar is blue (primary). Use any of the Bootstrap 4 contextual background color classes.

<div class="progress">
  <div class="progress-bar"  style="width: 20%" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" style="width: 40%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" style="width: 60%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" style="width: 85%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Output :
Striped Progress Bars

Add .progress-bar-stripedcode> to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.

<div class="progress">
  <div class="progress-bar progress-bar-striped"  style="width: 20%" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress">
  <div class="progress-bar bg-success progress-bar-striped" role="progressbar" style="width: 40%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress">
  <div class="progress-bar bg-info progress-bar-striped" role="progressbar" style="width: 60%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress">
  <div class="progress-bar bg-warning progress-bar-striped" role="progressbar" style="width: 85%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress">
  <div class="progress-bar bg-danger progress-bar-striped" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Output :
Animated Progress Bars

Add the .progress-bar-animated class to animate the progress bar.

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated"  style="width: 20%" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress">
  <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" style="width: 40%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress">
  <div class="progress-bar bg-info progress-bar-striped progress-bar-animated" role="progressbar" style="width: 60%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress">
  <div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" role="progressbar" style="width: 85%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br />
<div class="progress">
  <div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
Output :
Multiple Progress Bars

AInclude multiple progress bars in a progress component if you need.

<div class="progress">
  <div class="progress-bar bg-success" style="width:70%">
    Memory Used - 70%
  </div>
  <div class="progress-bar" style="width:30%">
    Free Space - 30%
  </div>
</div>
Output :
  Prev Page
Next Page  
About F T L
Contact
Govt Exams
Partners
  © 2017 - 2022. All Rights Reserved by Free Time Learning .
    Designed by F T L

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.