How to vertically align a progress bar in Twitter Bootstrap?

css, twitter-bootstrap

Solution

Bootstrap 2

Note this is a solution for bootstrap 2:

width 100%, height variable:

<br>
<div class="progress vertical">
  <div class="bar bar-success" style="height: 70%;width:100%"></div>
  <div class="bar bar-warning" style="height: 20%;width:100%"></div>
  <div class="bar bar-danger" style="height: 10%;width:100%"></div>
</div>

Bootstrap 3+

I'd like you to refer to the others comments on this page

Problem

I'm using the progressbar control of twitter-bootstrap. I want to align it vertically to look like in the following image: I found this thread, but I'm afraid it does not work now. So I do this: http://tinker.io/e69ff/2 HTML ``` <br> <div class="progress vertical"> <div class="bar bar-success" style="width: 70%;"></div> <div class="bar bar-warning" style="width: 20%;"></div> <div class="bar bar-danger" style="width: 10%;"></div> </div> ``` CSS ``` .progress.vertical { position: relative; width: 20px; min-height: 240px; float: left; margin-right: 20px; background: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: none; } ``` Do you have any tip or advice to get it? If you need more info, let me know and I'll edit the post.

Original source