Bootstrap 5 Progress Bars

Bootstrap 5 – A Comprehensive Guide to Modern Web Development

About Lesson

In Bootstrap 5, progress bars are used to visually represent the progress or completion of a task or process. They provide a visual indication of the current status. Here’s how you can create progress bars in Bootstrap 5:

Basic Progress Bar:

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

Progress Bar with Label:

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

Progress Bar with Different Colors:

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

Striped Progress Bar:

<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>

Animated Striped Progress Bar:

<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"></div>
</div>

You can customize the progress bars by adjusting the width (style="width: ...%"), changing the background color (bg-*), and adding additional classes like progress-bar-striped or progress-bar-animated to achieve different effects.

Feel free to incorporate progress bars into your website or application to indicate the progress of tasks, loading processes, or any other relevant information. For more details and additional options related to progress bars in Bootstrap 5, refer to the official Bootstrap documentation.

Join the conversation