Bootstrap Progress Bars

17 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Create Dynamic Progress Bars

In this Bootstrap tutorial, you’ll learn how to use Bootstrap’s Progress Bar classes to display task completion or status. Progress bars are great for showing progress visually, and we’ll pair them with images for a lively look.

What You’ll Learn

Creating a basic progress bar
Using different colors and styles
Adding labels to progress bars
Combining progress bars with images

Prerequisites

Basic knowledge of HTML
A text editor (e.g., VS Code, Notepad)
A web browser (e.g., Chrome, Firefox)

Step 1: Understand Bootstrap Progress Bars

Bootstrap Progress Bars use the progress and progress-bar classes to create horizontal bars that show completion percentages. You can customize them with colors, labels, or animations.

Assume Bootstrap CSS is included in your project (we’ll skip the <link> tag as requested).

Step 2: Create a Basic Progress Bar

Start with a simple progress bar showing 50% completion. Use this code:

<div class="container">
    <h3>Basic Progress Bar</h3>
    <div class="progress">
        <div class="progress-bar bg-primary" style="width: 50%"></div>
    </div>
</div>

Explanation:

container: Centers and constrains content.
progress: Creates the outer progress bar container.
progress-bar: Defines the filled portion.
bg-primary: Sets a blue color.
style="width: 50%": Fills 50% of the bar.

This creates a blue bar half-filled.

Step 3: Use Different Colors

Bootstrap offers color variants for progress bars. Try this:

<div class="container">
    <h3>Colored Progress Bars</h3>
    <div class="progress mb-2">
        <div class="progress-bar bg-success" style="width: 75%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-warning" style="width: 25%"></div>
    </div>
</div>

Explanation:

bg-success: Green bar for positive progress (75% complete).
bg-warning: Yellow bar for cautionary progress (25% complete).
mb-2: Adds margin-bottom for spacing.

These colors differentiate progress statuses.

Step 4: Add Labels and Stripes

Include a label and striped effect for clarity. Use this:

<div class="container">
    <h3>Labeled Progress Bar</h3>
    <div class="progress">
        <div class="progress-bar bg-info progress-bar-striped" style="width: 60%"></div>
    </div>
</div>

Explanation:

bg-info: Cyan bar for informational progress.
progress-bar-striped: Adds diagonal stripes for texture.
style="width: 60%": Sets 60% completion.

The stripes and label make the bar more informative.

Step 5: Combine with an Image

Pair a progress bar with a dummy image for context. Try this:

<div class="container">
    <div class="row">
        <div class="col-8">
            <h3>Project Progress</h3>
            <p>Track your task completion below.</p>
            <div class="progress">
                <div class="progress-bar bg-success progress-bar-striped" style="width: 80%"></div>
            </div>
        </div>
        <div class="col-4">
            <img src="https://placehold.co/200x150/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
        </div>
    </div>
</div>

Explanation:

row and col-8, col-4: Splits content into progress bar/text (8 units) and image (4 units).
bg-success progress-bar-striped: Green striped bar at 80%.
Uses a 200×150 green image for vibrancy.

The image enhances the progress bar’s context.

Final Code

Here’s a combined example with varied progress bars and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Progress Overview</h3>
            <div class="progress mb-2">
                <div class="progress-bar bg-primary" style="width: 40%"></div>
            </div>
            <div class="progress">
                <div class="progress-bar bg-danger" style="width: 20%"></div>
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>Task Status</h3>
            <div class="progress">
                <div class="progress-bar bg-info progress-bar-striped" style="width: 70%"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-7">
            <h3>File Upload</h3>
            <p>Uploading your files...</p>
            <div class="progress">
                <div class="progress-bar bg-success progress-bar-striped" style="width: 90%"></div>
            </div>
        </div>
        <div class="col-5">
            <img src="https://placehold.co/250x150/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
        </div>
    </div>
</div>

Output

Your webpage should show:

A row with a blue progress bar (40%) and a red progress bar (20%).
A row with a striped cyan progress bar (70%) with a label.
A two-column section with a striped green progress bar (90%), text, and a red image (250×150).
All progress bars are responsive, adjusting for mobile, with colorful images for a vibrant look.

Next Steps

Check the Bootstrap Progress Bars Docs for more options.
Try progress-bar-animated for moving stripes.
Use progress bars in Bootstrap forms for upload indicators.

Conclusion

You’ve mastered Bootstrap Progress Bars! With classes like progress-bar, bg-success, and progress-bar-striped, plus striking images, you’ve created dynamic, visual progress indicators. Keep experimenting to enhance your webpages.