Progress vertical

Vertical progress bar.

25%
50%
75%
100%
<!-- Source -->
<div class="progress progress-vertical mr-gutter" style="height:300px;">
  <div class="progress-bar" style="height:25%;">
    <div class="progress-value">25%</div>
  </div>
</div>
<div class="progress progress-vertical mr-gutter" style="height:300px;">
  <div class="progress-bar" style="height:50%;">
    <div class="progress-value">50%</div>
  </div>
</div>
<div class="progress progress-vertical mr-gutter" style="height:300px;">
  <div class="progress-bar" style="height:75%;">
    <div class="progress-value">75%</div>
  </div>
</div>
<div class="progress progress-vertical mr-gutter" style="height:300px;">
  <div class="progress-bar" style="height:100%;">
    <div class="progress-value">100%</div>
  </div>
</div>

Sizes

50%
50%
50%
50%
50%
<!-- Source -->
<div class="progress progress-vertical mr-gutter progress-1" style="height:300px;">
  <div class="progress-bar h-50">
    <div class="progress-value">50%</div>
  </div>
</div>
<div class="progress progress-vertical mr-gutter progress-2" style="height:300px;">
  <div class="progress-bar h-50">
    <div class="progress-value">50%</div>
  </div>
</div>
<div class="progress progress-vertical mr-gutter progress-3" style="height:300px;">
  <div class="progress-bar h-50">
    <div class="progress-value">50%</div>
  </div>
</div>
<div class="progress progress-vertical mr-gutter progress-4" style="height:300px;">
  <div class="progress-bar h-50">
    <div class="progress-value">50%</div>
  </div>
</div>
<div class="progress progress-vertical mr-gutter progress-5" style="height:300px;">
  <div class="progress-bar h-50">
    <div class="progress-value">50%</div>
  </div>
</div>

Responsive

<!-- Source -->
<div class="progress progress-vertical progress-sm-1"></div>
<div class="progress progress-vertical progress-sm-2"></div>
<div class="progress progress-vertical progress-sm-3"></div>
<div class="progress progress-vertical progress-sm-4"></div>
<div class="progress progress-vertical progress-sm-5"></div>

<div class="progress progress-vertical progress-md-1"></div>
<div class="progress progress-vertical progress-md-2"></div>
<div class="progress progress-vertical progress-md-3"></div>
<div class="progress progress-vertical progress-md-4"></div>
<div class="progress progress-vertical progress-md-5"></div>

<div class="progress progress-vertical progress-lg-1"></div>
<div class="progress progress-vertical progress-lg-2"></div>
<div class="progress progress-vertical progress-lg-3"></div>
<div class="progress progress-vertical progress-lg-4"></div>
<div class="progress progress-vertical progress-lg-5"></div>

<div class="progress progress-vertical progress-xl-1"></div>
<div class="progress progress-vertical progress-xl-2"></div>
<div class="progress progress-vertical progress-xl-3"></div>
<div class="progress progress-vertical progress-xl-4"></div>
<div class="progress progress-vertical progress-xl-5"></div>