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...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.