Progress example 1

Component
Name	Progress
Description	Progress bars with labels, colors, heights, stripes and several segments
Provider	Skin
Reference	getbootstrap.com - progress
Styling	For all possible color styles and corresponding examples, see colors.

Progress bar

Code

<div class="progress mb-3" role="progressbar" aria-label="Translation progress">
  <div class="progress-bar" style="width: 60%">60%</div>
</div>

Result

60%

Colors

Code

<div class="progress mb-2" role="progressbar" aria-label="Success example">
  <div class="progress-bar text-bg-success" style="width: 25%">25%</div>
</div>
<div class="progress mb-2" role="progressbar" aria-label="Info example">
  <div class="progress-bar text-bg-info" style="width: 50%">50%</div>
</div>
<div class="progress mb-2" role="progressbar" aria-label="Warning example">
  <div class="progress-bar text-bg-warning" style="width: 75%">75%</div>
</div>
<div class="progress mb-3" role="progressbar" aria-label="Danger example">
  <div class="progress-bar text-bg-danger" style="width: 100%">100%</div>
</div>

Result

25%

50%

75%

100%

Height and stripes

Code

<div class="progress mb-2" role="progressbar" aria-label="Thin bar" style="height: 4px">
  <div class="progress-bar" style="width: 40%"></div>
</div>
<div class="progress mb-3" role="progressbar" aria-label="Striped bar" style="height: 20px">
  <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 70%">70%</div>
</div>

Result

70%

Several segments

Code

<div class="progress-stacked mb-3">
  <div class="progress" role="progressbar" aria-label="Done" style="width: 40%">
    <div class="progress-bar text-bg-success">Done</div>
  </div>
  <div class="progress" role="progressbar" aria-label="In review" style="width: 25%">
    <div class="progress-bar text-bg-warning">In review</div>
  </div>
  <div class="progress" role="progressbar" aria-label="Open" style="width: 15%">
    <div class="progress-bar text-bg-danger">Open</div>
  </div>
</div>

Result

Done

In review

Open

This wiki contains content from the Bootstrap homepage, licensed Commons Attribution 3.0 Unported (CC BY 3.0). Thank you to everyone for creating outstanding content!