Progress bars in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Bootstrap progress bar with 50% completion.

Bootsrap

<div class="progress">
  <div class="progress-bar" role="progressbar" style="[1]" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>
</div>

Drag options to blanks, or click blank then click option'

Awidth: 50%

Bwidth: 100%

Cwidth: 75%

Dwidth: 25%

Attempts:

3 left

💡 Hint

Common Mistakes

Using a width value without the percent sign.

Setting width to 100% instead of 50%.

The style attribute sets the width of the progress bar. For 50% completion, use width: 50%.

2fill in blank

medium

Complete the code to add the Bootstrap class that makes the progress bar striped.

Bootsrap

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

Drag options to blanks, or click blank then click option'

Aprogress-bar-danger

Bprogress-bar-success

Cprogress-bar-animated

Dprogress-bar-striped

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'progress-bar-animated' instead of 'progress-bar-striped'.

Using color classes instead of style classes.

The class progress-bar-striped adds stripes to the progress bar for a visual effect.

3fill in blank

hard

Fix the error in the code by completing the class name to animate the progress bar.

Bootsrap

<div class="progress">
  <div class="progress-bar progress-bar-striped [1]" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70%</div>
</div>

Drag options to blanks, or click blank then click option'

Aprogress-bar-animated

Bprogress-bar-success

Cprogress-bar-danger

Dprogress-bar-striped

Attempts:

3 left

💡 Hint

Common Mistakes

Repeating 'progress-bar-striped' instead of adding 'progress-bar-animated'.

Using color classes instead of animation classes.

The class progress-bar-animated makes the striped progress bar animate smoothly.

4fill in blank

hard

Fill both blanks to create a progress bar with 40% width and a success color.

Bootsrap

<div class="progress">
  <div class="progress-bar [1]" role="progressbar" style="[2]" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div>
</div>

Drag options to blanks, or click blank then click option'

Abg-success

Bwidth: 40%

Cbg-danger

Dwidth: 60%

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bg-danger' for success color.

Setting width to 60% instead of 40%.

Use bg-success for green color and width: 40% to set the progress bar's fill to 40%.

5fill in blank

hard

Fill all three blanks to create a striped, animated, warning-colored progress bar at 80%.

Bootsrap

<div class="progress">
  <div class="progress-bar [1] [2] [3]" role="progressbar" style="width: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>

Drag options to blanks, or click blank then click option'

Aprogress-bar-striped

Bprogress-bar-animated

Cbg-warning

Dbg-info

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bg-info' instead of 'bg-warning'.

Missing either the striped or animated class.

Combine progress-bar-striped and progress-bar-animated for the striped animation effect, and bg-warning for the yellow warning color.

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