Bootsrapmarkup~30 mins

Progress bars in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

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.

Progress0 / 4 steps

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

Need a hint?

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

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

Need a hint?

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

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

Need a hint?

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

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%

Need a hint?

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