Tutorial

Sign Up

log In

Bootstrap
Bootstrap 5 Progress Bar

❮ Previous

Next ❯

Progress bars in Bootstrap 5 provide a visual representation of progress or completion percentage. They are customizable and easy to use with different styles, animations, and stacked configurations.

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

Try it yourself

Progress Bar Height:

Use the CSS height property to change it:

Example
<div class="progress" style="height:20px">
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br/>
<div class="progress" style="height:30px">
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<br/>
<div class="progress" style="height:40px">
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Try it yourself

Progress Bar with Different Background Colors:

Bootstrap provides contextual classes to style progress bars.

Example
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%;" 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: 50%;" 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: 75%;" 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>

Try it yourself

Striped Progress Bar:

Use .progress-bar-striped to add stripes to the progress bar.

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

Try it yourself

Animated Progress Bar:

Add .progress-bar-animated to create an animated effect.

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

Try it yourself

Multiple Progress Bars:

You can stack multiple progress bars by placing multiple .progress-bar elements inside a single .progress container.

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

Try it yourself

❮ Previous

Next ❯
Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.