History: Bootstrap Components Progress Bars
Source of version: 1 (current)
Copy to clipboard
{HTML()}
<!-- Progress bars
================================================== -->
<div class="bs-docs-section">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h1 id="progress">Progress bars</h1>
</div>
<h3 id="progress-basic">Basic</h3>
<div class="bs-example">
<div class="progress">
<div class="progress-bar" style="width: 60%;"></div>
</div>
</div>
<h3 id="progress-alternatives">Contextual alternatives</h3>
<div class="bs-example">
<div class="progress" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div>
<div class="progress" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
</div>
<div class="progress" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
</div>
</div>
<h3 id="progress-striped">Striped</h3>
<div class="bs-example">
<div class="progress progress-striped" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-info" style="width: 20%"></div>
</div>
<div class="progress progress-striped" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-success" style="width: 40%"></div>
</div>
<div class="progress progress-striped" style="margin-bottom: 9px;">
<div class="progress-bar progress-bar-warning" style="width: 60%"></div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" style="width: 80%"></div>
</div>
</div>
<h3 id="progress-animated">Animated</h3>
<div class="bs-example">
<div class="progress progress-striped active">
<div class="progress-bar" style="width: 45%"></div>
</div>
</div>
<h3 id="progress-stacked">Stacked</h3>
<div class="bs-example">
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%"></div>
<div class="progress-bar progress-bar-warning" style="width: 20%"></div>
<div class="progress-bar progress-bar-danger" style="width: 10%"></div>
</div>
</div>
</div>
</div>
</div>
{HTML}