O'Reilly logo

Bootstrap for ASP.NET MVC by Pieter van der Westhuizen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Progress bars

Progress bars are a metaphor used with traditional desktop as well as web development to provide visual feedback to a user on the progress of a task or action. Bootstrap provides a number of differently styled progress bars.

The basic progress bar

The basic Bootstrap progress bar displays a plain blue-colored progress bar. Adding a <span> element with a class name of sr-only is good practice in order to allow screen readers to read the progress percentage. The following markup generates a basic progress bar with a heading:

<h4>Basic Progressbar</h4> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%;"> <span class="sr-only">80% Complete</span> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required