Kenhuang Academy
  • English

      • Bootstrap Progress

      Overview

      Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.

      Basic Progress

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

      Labels

      Add labels to your progress bars by placing text within the .progress-bar.

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

      Height

      Only set a height value on the .progress, so if you change that value the inner .progress-bar will automatically resize accordingly.

      <div class="progress" style="height: 1px;">
    <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>