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.