<div class="card-pf">
  <div class="card-pf-heading">
    <h2 class="card-pf-title">
      Top Utilized Clusters
    </h2>
  </div>
  <div class="card-pf-body">
    <div class="progress-description">
      RHOS6-Controller
    </div>
    <div class="progress progress-label-top-right">
      <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 95%;"  data-toggle="tooltip" title="95% Used">
        <span><strong>190.0 of 200.0 GB</strong> Used</span>
      </div>
      <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="5" aria-valuemin="0" aria-valuemax="100" style="width: 5%;" data-toggle="tooltip" title="5% Available">
        <span class="sr-only">5% Available</span>
      </div>
    </div>
    <div class="progress-description">
      CFMEQE-Cluster
    </div>
    <div class="progress progress-label-top-right">
      <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;"  data-toggle="tooltip" title="50% Used">
        <span><strong>100.0 of 200.0 GB</strong> Used</span>
      </div>
      <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%;" data-toggle="tooltip" title="50% Available">
        <span class="sr-only">50% Available</span>
      </div>
    </div>
    <div class="progress-description">
      RHOS-Undercloud
    </div>
    <div class="progress progress-label-top-right">
      <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;"  data-toggle="tooltip" title="70% Used">
        <span><strong>140.0 of 200.0 GB</strong> Used</span>
      </div>
      <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;" data-toggle="tooltip" title="30% Available">
        <span class="sr-only">30% Available</span>
      </div>
    </div>
    <div class="progress-description">
      RHEL6-Controller
    </div>
    <div class="progress progress-label-top-right">
      <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="76.5" aria-valuemin="0" aria-valuemax="100" style="width: 76.5%;"  data-toggle="tooltip" title="76.5% Used">
        <span><strong>153.0 of 200.0 GB</strong> Used</span>
      </div>
      <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="23.5" aria-valuemin="0" aria-valuemax="100" style="width: 23.5%;" data-toggle="tooltip" title="23.5% Available">
        <span class="sr-only">23.5% Available</span>
      </div>
    </div>
  </div>
</div>
