How to align vertically a progress bar in twitter-bootstrap?

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.

Answers


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>

Need Your Help

How to set UIDatePicker's date's seconds value to 00?

ios objective-c cocoa-touch nsdate uidatepicker

How to always get seconds value "00" for UIDatePicker's date?

How to finalize Live File System (LiveUDF) disc with DeviceIoControl and FSCTL_MAKE_MEDIA_COMPATIBLE in C#?

c# user-defined-functions finalize imapi deviceiocontrol

I'm trying to finalize a Live File System (or "Live UDF") optical disc in C#. From what I understand from reading MSDN and TechNet articles along with various forum postings, the Image Mastering AP...