How to vertically align a progress bar in Twitter Bootstrap? - css

Question

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.

Answer 1

Bootstrap 3 and Bootstrap 4 solution.
Demo: https://jsfiddle.net/elijahmurray/7tgh988z/
I struggled with finding a good solution to this problem for awhile. Ultimately, I ended up writing my own that is semantically similar to how Bootstrap structures their progress bars.
This solution also doesn't use transform, which I found really messed up a lot of things with positioning when using it. Not to mention, it just got confusing with that.
HTML
<div class="progress progress-bar-vertical">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="height: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
CSS
.progress-bar-vertical {
width: 20px;
min-height: 100px;
margin-right: 20px;
float: left;
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
display: flex; /* NEW, Spec - Firefox, Chrome, Opera */
align-items: flex-end;
-webkit-align-items: flex-end; /* Safari 7.0+ */
}
.progress-bar-vertical .progress-bar {
width: 100%;
height: 0;
-webkit-transition: height 0.6s ease;
-o-transition: height 0.6s ease;
transition: height 0.6s ease;
}
Vote if this was helpful!

Answer 2

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

Answer 3

this will work:
.progress{
transform: rotate(-90deg);
}
http://codepen.io/mcgraw/pen/eCwvu

Answer 4

Changing the twitter bootstrap progress bar and animation from horizontal position to vertical position
========================================================================
HTML
<div class="progress progress-vertical progress-striped active progress-success">
<div class="bar" style="width: 40px;"></div>
</div>
<div class="progress progress-vertical progress-striped active progress-danger">
<div class="bar" style="width: 40px;"></div>
</div>
CSS
.progress-vertical {
position: relative;
width: 40px;
min-height: 240px;
float: left;
margin-right: 20px; }
Modify The Twitter bootstrap.css file as specified below:
#-webkit-keyframes progress-bar-stripes {
from {
background-position: 0 40px;
}
to {
background-position: 0 0;
}
}
#-moz-keyframes progress-bar-stripes {
from {
background-position: 0 40px;
}
to {
background-position: 0 0;
}
}
#-ms-keyframes progress-bar-stripes {
from {
background-position: 0 40px;
}
to {
background-position: 0 0;
}
}
#-o-keyframes progress-bar-stripes {
from {
background-position: 0 0;
}
to {
background-position: 0 40px;
}
}
#keyframes progress-bar-stripes {
from {
background-position: 0 40px;
}
to {
background-position: 0 0;
}
}
Change background-repeat to repeat-y and the degrees to 0deg. so, that the animation renders vertically
.progress-danger .bar,
.progress .bar-danger {
background-repeat: repeat-y;
}
.progress-danger.progress-striped .bar,
.progress-striped .bar-danger {
background-color: #ee5f5b;
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
Follow the same with the other progress types like success,warning etc and achieve vertical twitter bootstrap progress bars and animations...!
For you have any queries let me know I may help you..!
If any one out there have any optimized solution than this then please let me know..!
Don't forget to support this solution..!
Enjoy!

Answer 5

For the main progress class add the following
.progress{
display: flex;
flex-direction: column-reverse;
}

Answer 6

CSS
.progress{
position: absolute;left:50.5%;top:40%;width: 2.5%;height:50%;opacity: 0.8; filter: alpha(opacity=80);
}
.progress-bar{
position:absolute;top:20%; width: 100%;height: 80%;
}
See complete Code and implementation here