Progress bars

Marketing

90%


<!-- Progress bar box 1 -->
<div class="progress-box">
  <h6 class="font-weight-normal">Marketing</h6>
  <div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
      <span>90%</span>
    </div>
  </div>
</div>

Heights

Marketing

90%

Marketing

90%

Marketing

90%

Marketing

90%

Marketing

90%


<!-- Height: 2px(default) -->
<div class="progress-box">
  <h6 class="font-weight-normal">Marketing</h6>
  <div class="progress">
    ..
  </div>
</div>
<!-- Height: 2px -->
<div class="progress-box">
  <h6 class="font-weight-normal">Marketing</h6>
  <div class="progress progress-height-2px">
    ..
  </div>
</div>
<!-- Height: 3px -->
<div class="progress-box">
  <h6 class="font-weight-normal">Marketing</h6>
  <div class="progress progress-height-3px">
    ..
  </div>
</div>
<!-- Height: 4px -->
<div class="progress-box">
  <h6 class="font-weight-normal">Marketing</h6>
  <div class="progress progress-height-4px">
    ..
  </div>
</div>
<!-- Height: 5px -->
<div class="progress-box">
  <h6 class="font-weight-normal">Marketing</h6>
  <div class="progress progress-height-5px">
    ..
  </div>
</div>

Border radius

Marketing

90%


<!-- Progress bar box 1 -->
<div class="progress-box">
  <h6 class="font-weight-normal">Marketing</h6>
  <div class="progress progress-height-5px progress-radius">
    <div class="progress-bar" role="progressbar" style="width: 90%;" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
      <span>90%</span>
    </div>
  </div>
</div>