ouhma ouhma - 3 months ago 10
CSS Question

How to vertically align 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:

Bootstrap

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.

Answer

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

Comments