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.

Archive