<div class="row">
  <div class="col-md-4">

  <div class="progress">
  <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar progress-bar-primary">
  <span class="sr-only">60% Complete</span>
  </div>
  </div>

  </div>
  <div class="col-md-4">

  <div class="progress">
  <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar progress-bar-primary">
  60%
  </div>
  </div>

  </div>
  <div class="col-md-4">

  <div class="progress">
  <div style="min-width: 2em;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar" class="progress-bar progress-bar-primary">
  0%
  </div>
  </div>

  </div>
  </div>

  <div class="row">
  <div class="col-md-4">

  <div class="progress">
  <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar progress-bar-primary">
  <span class="sr-only">60% Complete</span>
  </div>
  </div>

  </div>
  <div class="col-md-4">

  <div class="progress">
  <div style="width: 60%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar progress-bar-primary">
  60%
  </div>
  </div>

  </div>
  <div class="col-md-4">

  <div class="progress">
  <div style="min-width: 2em;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="0" role="progressbar" class="progress-bar progress-bar-primary">
  0%
  </div>
  </div>

  </div>
  </div>  

  <div class="row">
  <div class="col-xs-12">
  <div class="progress">
  <div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-success">
  <span class="sr-only">40% Complete (success)</span>
  </div>
  </div>
  <div class="progress">
  <div style="width: 20%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" role="progressbar" class="progress-bar progress-bar-info">
  <span class="sr-only">20% Complete</span>
  </div>
  </div>
  <div class="progress">
  <div style="width: 60%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="60" role="progressbar" class="progress-bar progress-bar-warning">
  <span class="sr-only">60% Complete (warning)</span>
  </div>
  </div>
  <div class="progress">
  <div style="width: 80%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" role="progressbar" class="progress-bar progress-bar-danger">
  <span class="sr-only">80% Complete (danger)</span>
  </div>
  </div>
  </div>
  </div>

  <div class="row">
  <div class="col-md-6">

  <h4>Striped</h4>

  <div class="progress">
  <div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-primary progress-bar-striped">
  <span class="sr-only">40% Complete (success)</span>
  </div>
  </div>
  </div>
  <div class="col-md-6">

  <h4>Animated</h4>

  <div class="progress">
  <div style="width: 45%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="45" role="progressbar" class="progress-bar progress-bar-primary progress-bar-striped active">
  <span class="sr-only">45% Complete</span>
  </div>
  </div>
  </div>
  </div>