# Progress

Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.

## Example

Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60%
Task completed
60%

    <div class="progress-wrapper">
      <div class="progress-info">
        <div class="progress-label">
          <span>Task completed</span>
        </div>
        <div class="progress-percentage">
          <span>60%</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar bg-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
      </div>
    </div>

    <div class="progress-wrapper">
      <div class="progress-info">
        <div class="progress-label">
          <span>Task completed</span>
        </div>
        <div class="progress-percentage">
          <span>60%</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
      </div>
    </div>

    <div class="progress-wrapper">
      <div class="progress-info">
        <div class="progress-label">
          <span>Task completed</span>
        </div>
        <div class="progress-percentage">
          <span>60%</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar bg-secondary" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
      </div>
    </div>

    <div class="progress-wrapper">
      <div class="progress-info">
        <div class="progress-label">
          <span>Task completed</span>
        </div>
        <div class="progress-percentage">
          <span>60%</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar bg-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
      </div>
    </div>

    <div class="progress-wrapper">
      <div class="progress-info">
        <div class="progress-label">
          <span>Task completed</span>
        </div>
        <div class="progress-percentage">
          <span>60%</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar bg-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
      </div>
    </div>

    <div class="progress-wrapper">
      <div class="progress-info">
        <div class="progress-label">
          <span>Task completed</span>
        </div>
        <div class="progress-percentage">
          <span>60%</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
      </div>
    </div>

    <div class="progress-wrapper">
      <div class="progress-info">
        <div class="progress-label">
          <span>Task completed</span>
        </div>
        <div class="progress-percentage">
          <span>60%</span>
        </div>
      </div>
      <div class="progress">
        <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
      </div>
    </div>