Progress bars in Bootsrap - Mini Project: Build & Apply

Creating a Bootstrap Progress Bar

📖 Scenario: You are building a simple webpage to show the progress of a task using a progress bar. This is common in websites where users need to see how much of a process is done, like uploading a file or completing a form.

🎯 Goal: Build a webpage that displays a Bootstrap progress bar showing 60% completion.

📋 What You'll Learn

Use Bootstrap 5 CSS from a CDN

Create a progress bar with exactly 60% progress

Use semantic HTML5 structure

Make sure the progress bar has accessible labels

💡 Why This Matters

🌍 Real World

Progress bars are used on websites to visually show users how much of a task is done, like file uploads or form completion.

💼 Career

Knowing how to implement accessible and styled progress bars is useful for frontend web developers working on user interfaces.

1

Set up the basic HTML structure with Bootstrap CSS

Create a basic HTML5 page with lang="en" in the <html> tag. Inside the <head>, add the <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1"> tags. Also, include the Bootstrap 5 CSS CDN link: https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css. Add an empty <body> section.

Bootsrap

Hint

Remember to add the Bootstrap CSS link inside the <head> section.

2

Add a container and heading for the progress bar

Inside the <body>, add a <main> element with a Bootstrap class container. Inside this container, add an <h1> heading with the text Task Progress.

Bootsrap

    
    
    
    Progress Bar Example


    
        
    

Hint

Use a <main> tag with class container and add an <h1> inside it.

3

Add the Bootstrap progress bar with 60% completion

Inside the <main class="container">, below the heading, add a <div> with class progress. Inside it, add another <div> with classes progress-bar and role="progressbar". Set its style attribute to width: 60%;. Also add aria-valuenow="60", aria-valuemin="0", and aria-valuemax="100". The text inside this inner div should be 60%.

Bootsrap

    
    
    
    Progress Bar Example


    
        Task Progress
        
    

Hint

Use nested <div> elements with the correct Bootstrap classes and accessibility attributes.

4

Add a footer with a small note below the progress bar

Below the progress bar inside the <main class="container">, add a <footer> element. Inside it, add a <small> tag with the text Progress updates every minute.

Bootsrap

    
    
    
    Progress Bar Example


    
        Task Progress
        
            60%
        
        
    

Hint

Add a <footer> with a <small> tag below the progress bar inside the container.

Practice

1. What is the main purpose of a progress bar in Bootstrap?

easy

A. To create clickable buttons

B. To add navigation links

C. To display images in a slideshow

D. To visually show how much of a task is completed

Solution

1. Step 1: Understand the role of progress bars

   Progress bars are used to show progress visually, like filling a bar as a task advances.

2. Step 2: Match the purpose with options

   Only To visually show how much of a task is completed describes showing task completion visually, which is the purpose of progress bars.

3. Final Answer:

   To visually show how much of a task is completed -> Option D

4. Quick Check:

   Progress bar = Visual task progress [OK]

Hint: Progress bars show task completion visually [OK]

Common Mistakes:

• Confusing progress bars with buttons or links
• Thinking progress bars display images
• Mixing progress bars with navigation elements

2. Which of the following is the correct Bootstrap class to create a basic progress bar container?

easy

A. <div class='progress'></div>

B. <div class='progress-bar'></div>

C. <div class='bar-progress'></div>

D. <div class='progress-container'></div>

Solution

1. Step 1: Identify the container class for progress bars in Bootstrap

   The container that holds the progress bar is progress, not progress-bar which is the inner bar.

2. Step 2: Check each option

   <div class='progress'></div> uses progress which is correct. The other options use incorrect or non-existent classes.

3. Final Answer:

   <div class='progress'></div> -> Option A

4. Quick Check:

   Container class = progress [OK]

Hint: Container uses class 'progress', inner bar uses 'progress-bar' [OK]

Common Mistakes:

• Using 'progress-bar' as container instead of inner bar
• Inventing class names like 'bar-progress'
• Confusing container and inner bar classes

3. What will be the visual result of this code?

<div class='progress'>
  <div class='progress-bar bg-success' role='progressbar' style='width: 75%;'>75%</div>
</div>

medium

A. A green progress bar filled to 100% with no text

B. A green progress bar filled to 75% with text '75%' inside

C. A red progress bar filled to 75% with text '75%' inside

D. No progress bar will show because of missing classes

Solution

1. Step 1: Analyze the classes and styles

   The inner div has class progress-bar and bg-success which makes it green. The style sets width to 75%.

2. Step 2: Understand the visual output

   The bar will fill 75% of the container width in green color and show the text '75%'.

3. Final Answer:

   A green progress bar filled to 75% with text '75%' inside -> Option B

4. Quick Check:

   bg-success + width 75% = green bar 75% filled [OK]

Hint: bg-success means green, style width controls fill [OK]

Common Mistakes:

• Confusing bg-success with red color
• Ignoring the style width property
• Expecting 100% fill without style

4. Identify the error in this Bootstrap progress bar code:

<div class='progress'>
  <div class='progress-bar' role='progressbar' style='width: 50%;>50%</div>
</div>

medium

A. Missing closing quote in style attribute

B. Incorrect class name 'progress-bar'

C. Missing role attribute

D. Progress bar width cannot be 50%

Solution

1. Step 1: Check the style attribute syntax

   The style attribute is style='width: 50%;> which misses the closing single quote before the closing angle bracket.

2. Step 2: Verify other attributes

   Class progress-bar and role attribute are correct. Width 50% is valid.

3. Final Answer:

   Missing closing quote in style attribute -> Option A

4. Quick Check:

   Style attribute quotes must close properly [OK]

Hint: Check quotes around style attribute carefully [OK]

Common Mistakes:

• Ignoring missing quote causing HTML error
• Thinking class 'progress-bar' is wrong
• Assuming role attribute is optional but not error

5. You want to create a striped and animated progress bar at 40% width with a blue color using Bootstrap. Which code snippet is correct?

hard

A. <div class='progress-bar progress bg-primary striped animated' role='progressbar' style='width: 40%;'>40%</div>

B. <div class='progress'><div class='progress-bar bg-info striped animated' role='progressbar' style='width: 40%;'>40%</div></div>

C. <div class='progress'><div class='progress-bar bg-primary progress-bar-striped progress-bar-animated' role='progressbar' style='width: 40%;'>40%</div></div>

D. <div class='progress'><div class='progress-bar bg-primary progress-striped progress-animated' role='progressbar' style='width: 40%;'>40%</div></div>

Solution

1. Step 1: Identify correct Bootstrap classes for striped and animated bars

   The correct classes are progress-bar-striped and progress-bar-animated. The color class for blue is bg-primary.

2. Step 2: Check each option's class usage and structure

   <div class='progress'><div class='progress-bar bg-primary progress-bar-striped progress-bar-animated' role='progressbar' style='width: 40%;'>40%</div></div> uses all correct classes and structure inside a progress container. The other options use incorrect or missing class names or wrong container structure.

3. Final Answer:

   <div class='progress'><div class='progress-bar bg-primary progress-bar-striped progress-bar-animated' role='progressbar' style='width: 40%;'>40%</div></div> -> Option C

4. Quick Check:

   Striped + animated classes = progress-bar-striped + progress-bar-animated [OK]

Hint: Use 'progress-bar-striped' and 'progress-bar-animated' for effects [OK]

Common Mistakes:

• Using incorrect class names like 'striped' or 'progress-striped'
• Missing the container div with class 'progress'
• Placing classes on wrong elements