How to create progress bar in bootstrap

BootstrapHow-ToBeginner · 3 min read

How to Create a Progress Bar in Bootstrap: Simple Guide

To create a progress bar in Bootstrap, use the div element with class progress as a container and a nested div with class progress-bar to show progress. Set the width of the progress-bar using inline styles or utility classes to indicate progress visually.

📐

Syntax

The basic structure of a Bootstrap progress bar includes a container with the progress class and a child div with the progress-bar class. The width of the progress bar is controlled by the style attribute or Bootstrap width utility classes.

progress: The wrapper that holds the progress bar.
progress-bar: The colored bar that fills according to progress.
style="width: X%;": Sets the fill percentage of the bar.

html

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

Output

A horizontal bar filled halfway to represent 50% progress.

💻

Example

This example shows a progress bar filled to 70%. It uses Bootstrap classes and accessibility attributes for screen readers.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Progress Bar Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <h2>Progress Bar Example</h2>
    <div class="progress" style="height: 30px;">
      <div class="progress-bar bg-success" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70%</div>
    </div>
  </div>
</body>
</html>

Output

A green horizontal bar inside a container, filled to 70% width with the text '70%' visible inside the bar.

⚠️

Common Pitfalls

Common mistakes when creating Bootstrap progress bars include:

Forgetting the progress container, which breaks the layout.
Not setting the width style on the progress-bar, so the bar does not show progress.
Missing accessibility attributes like role="progressbar" and aria-valuenow, which help screen readers.
Using inline styles without units or invalid values.

bootstrap

<!-- Wrong: Missing progress container -->
<div class="progress-bar" style="width: 50%;"></div>

<!-- Right: Include progress container -->
<div class="progress">
  <div class="progress-bar" style="width: 50%;"></div>
</div>

📊

Quick Reference

Tips for using Bootstrap progress bars:

Use bg-* classes to change bar color (e.g., bg-success, bg-info).
Adjust height with inline styles or custom CSS.
Use multiple progress-bar divs inside one progress for stacked bars.
Always include accessibility attributes for better usability.

✅

Key Takeaways

Wrap the progress bar inside a div with class progress for proper layout.

Set the fill level by adjusting the width style on the progress-bar element.

Use Bootstrap color classes like bg-success to customize the bar's color.

Include accessibility attributes like role="progressbar" and aria-valuenow for screen reader support.

Avoid missing the container or width style to ensure the progress bar displays correctly.