Loading...
 
Skip to main content

History: Bootstrap Components Progress Bars

View published page

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}