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.