Home » Exercises » Bootstrap Exercises » All Bootstrap Exercises » Create a progress bar at 60 percent

Create a progress bar at 60 percent

Description: Show a progress bar which is filled to 60% with the text “60%”.

Hint:

  • Use progress, progress-bar and the width style. Add the aria attributes.

Solution

<div class="progress" role="progressbar" aria-label="Course progress" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
  <div class="progress-bar bg-success" style="width: 60%">60%</div>
</div>
Live preview

How it works

  • The width of .progress-bar is the percent. The role and aria values are on the wrapper for screen readers.

Read Progress Bars and Spinners.

Share this post:

Share on LinkedIn
Learn more about the similar topics:
Tutorials
No Content Found.
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.