Question

Is there a way that I can turn bootstrap progress bars sideways to use them as a column chart?
I’m thinking about going to Google graphs, but it’s easier to work with bootstrap.
Here’s some code to get past the StackOverflow quality standards.

Code goes here.

Answer 1

This is a workaround. It’s not so good but it’s very short and it works.

Usage: it’s very similar to the usual progress bar, but there are two differences:

1. You should set the bar height, not width
2. Progress bar height is fixed (but it could be changed with inline style)

CSS:

.progress-vertical {
    width: 20px;
    height: 100px !important;
    position: relative;
}
.progress-vertical .bar {
    width: 100% !important;
    position: absolute;
    bottom: 0;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

Example: http://jsfiddle.net/mQzj9/251/

Edit 1: Fixed wrong example link.

Edit 2: Thanks to Pavlo Mykhalov, the jQuery code is not needed anymore (CSS updated)

Edit 3: CSS link outdated, updated.