Skip to main content

Components

Over a dozen reusable components built to provide buttons, dropdowns, input groups, navigation, alerts, and much more.

Progress

Stylize the HTML5 <progress> element with a few extra classes and some crafty browser-specific CSS. Be sure to read up on the browser support.

Contents

Example

To caption a progress bar, simply add a <div> with your caption text, align the text using a utility class, and associate the caption with the <progress> element using the aria-describedby attribute.

Reticulating splines… 0%
Reticulating splines… 25%
Reticulating splines… 50%
Reticulating splines… 75%
Reticulating splines… 100%
<div class="text-center" id="example-caption-1">Reticulating splines&hellip; 0%</div>
<progress class="progress" value="0" max="100" aria-describedby="example-caption-1"></progress>

<div class="text-center" id="example-caption-2">Reticulating splines&hellip; 25%</div>
<progress class="progress" value="25" max="100" aria-describedby="example-caption-2"></progress>

<div class="text-center" id="example-caption-3">Reticulating splines&hellip; 50%</div>
<progress class="progress" value="50" max="100" aria-describedby="example-caption-3"></progress>

<div class="text-center" id="example-caption-4">Reticulating splines&hellip; 75%</div>
<progress class="progress" value="75" max="100" aria-describedby="example-caption-4"></progress>

<div class="text-center" id="example-caption-5">Reticulating splines&hellip; 100%</div>
<progress class="progress" value="100" max="100" aria-describedby="example-caption-5"></progress>

Contextual alternatives

Progress bars use some of the same button and alert classes for consistent styles.

<progress class="progress progress-success" value="25" max="100"></progress>
<progress class="progress progress-info" value="50" max="100"></progress>
<progress class="progress progress-warning" value="75" max="100"></progress>
<progress class="progress progress-danger" value="100" max="100"></progress>

Striped

Uses a gradient to create a striped effect.

<progress class="progress progress-striped" value="10" max="100"></progress>
<progress class="progress progress-striped progress-success" value="25" max="100"></progress>
<progress class="progress progress-striped progress-info" value="50" max="100"></progress>
<progress class="progress progress-striped progress-warning" value="75" max="100"></progress>
<progress class="progress progress-striped progress-danger" value="100" max="100"></progress>

Animated stripes

The striped gradient can also be animated. Add .progress-animated to .progress to animate the stripes right to left via CSS3 animations.

Animated progress bars don’t work in Opera 12—as they don’t support CSS3 animations. They also don’t work in IE10+ and Microsoft Edge as those browsers currently don’t support CSS3 animations on the ::-ms-fill pseudo-element.

<progress class="progress progress-striped progress-animated" value="25" max="100"></progress>