Progress bars in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What is the visual output of this Bootstrap progress bar code?

Look at this Bootstrap progress bar code snippet. What will you see in the browser?

Bootsrap

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

A A green horizontal bar filling half the width inside a thin progress container.

B A blue horizontal bar filling the entire width inside a tall progress container.

C A red horizontal bar filling 75% width inside a thin progress container.

D No visible bar because the width is set to 0%.

💡 Hint

Check the class 'bg-success' and the style width percentage.

The 'bg-success' class colors the bar green. The width style '50%' means the bar fills half the container horizontally. The container height is 1.5rem, so the bar is thin and horizontal.

❓ selector

intermediate

Which CSS selector targets only the progress bar inside a progress container?

Given this HTML structure, which CSS selector correctly styles only the progress bar inside the progress container? <div class="progress"> <div class="progress-bar"></div> </div>

A .progress-bar

B .progress-bar > .progress

C .progress .progress-bar > div

D .progress > .progress-bar

💡 Hint

Look for the direct child selector between container and bar.

The selector '.progress > .progress-bar' targets only elements with class 'progress-bar' that are direct children of elements with class 'progress'. Option D selects all progress bars anywhere, options B and C are invalid for this structure.

🧠 Conceptual

advanced

What ARIA attributes are essential for accessible Bootstrap progress bars?

Which set of ARIA attributes must be included on the progress bar element to make it accessible for screen readers?

A aria-label, aria-hidden, role="progressbar"

B aria-valuenow, aria-valuemin, aria-valuemax, role="progressbar"

C aria-checked, aria-expanded, role="progressbar"

D aria-live, aria-atomic, role="progressbar"

💡 Hint

Think about attributes that describe the progress value and range.

For progress bars, screen readers need to know the current value, minimum, and maximum values, so aria-valuenow, aria-valuemin, aria-valuemax are essential. The role must be 'progressbar'. Other ARIA attributes listed do not describe progress.

❓ layout

advanced

How to create a stacked progress bar with two segments in Bootstrap?

You want a progress bar with two colored segments side by side, filling 30% and 50% respectively. Which code snippet achieves this?

A

<div class="progress">
  <div class="progress-bar bg-info" style="width: 30%;"></div>
  <div class="progress-bar bg-warning" style="width: 50%;"></div>
</div>

B

<div class="progress">
  <div class="progress-bar bg-info" style="width: 30%;"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" style="width: 50%;"></div>
</div>

C

<div class="progress">
  <div class="progress-bar bg-info" style="width: 50%;"></div>
  <div class="progress-bar bg-warning" style="width: 30%;"></div>
</div>

D

<div class="progress">
  <div class="progress-bar bg-info" style="width: 80%;"></div>
</div>

💡 Hint

Stacked bars are multiple progress-bar divs inside one progress container.

Bootstrap supports stacked progress bars by placing multiple .progress-bar divs inside one .progress container. The widths add up horizontally. Option A correctly stacks 30% and 50%. Option A creates two separate bars stacked vertically. Option A reverses widths. Option A is a single bar.

📝 Syntax

expert

What error occurs with this incorrect Bootstrap progress bar code?

Consider this code snippet: <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 120%;" aria-valuenow="120" aria-valuemin="0" aria-valuemax="100"></div> </div> What problem will this cause in the browser?

Bootsrap

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

A The progress bar will be invisible because width exceeds 100%.

B The browser will throw a syntax error and not render the bar.

C The progress bar will overflow the container visually, showing more than 100%.

D The progress bar will automatically clamp to 100% width without overflow.

💡 Hint

CSS width can exceed 100%, causing overflow.

Setting width to 120% causes the bar to overflow its container visually. Browsers do not clamp width automatically. No syntax error occurs. The bar remains visible but extends beyond 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