Bootstrap Progress Bars
Bootstrap provides a versatile set of progress bar components that allow developers to visually represent the progress of tasks, processes, or actions on their web pages. Here's how to use Bootstrap progress bars:
1. Basic Progress Bar
To create a basic progress bar, use the progress
and progress-bar
classes:
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
</div>
The progress-bar
class represents the actual progress, and the style="width: 60%"
attribute sets the width to 60%.
2. Progress Bar with Label
You can add a label to the progress bar by including text inside the progress-bar
element:
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75% Complete</div>
</div>
3. Colored Progress Bars
Bootstrap allows you to customize the color of progress bars using contextual classes such as bg-success
, bg-info
, bg-warning
, and bg-danger
:
<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>
4. Striped Progress Bars
Striped progress bars can be achieved by adding the progress-bar-striped
class:
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
5. Animated Progress Bars
For animated progress bars, use the progress-bar-animated
class:
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
6. Stacked Progress Bars
Bootstrap allows you to stack multiple progress bars together to represent multiple tasks or steps:
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div>
<div class="progress-bar bg-success" role="progressbar" style="width: 30%;" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div>
</div>
Conclusion
Bootstrap's progress bars offer a flexible and easy-to-use solution for visualizing progress on web pages. By applying various classes and styles, developers can create customized progress bars to suit their specific design requirements.
Comments
Post a Comment