How to put a progress bar on the left?

Question

Hey guys! Well, I'm creating a CMS theme, but I'm having a question. I got the progress bar code in Bootstrap, but I wanted it to be left aligned, not in the middle ... Can anyone help me?

The code:

<div class="well">
<h4>Disk Space Used</h4>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
<h4>Bandwidth Used</h4>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
40%
</div>
</div>

Answer 1

I made a mistake:

Left alignement is the default behaviour, so without the classes definitions, we cannot know what is the reason of not be left aligned...
You can try 'margin-right:auto;' but probably without effect, if the parent <div class="progress"> don't have more width than it's child ^^

Answer 2

Not necessary to create a floating element... wich can comes with troubles, depending on context ^^

Just set "margin-left:auto;" to your <div class="progress-bar"> styles, should be enough to do the trick... but without your style sheets, it's hard to say what behavior is already apply on each element, so practically impossible to tell how to adapt it ;)

Another note: cannot you use Html5 <progress> element instead of styling nested <div>s? Maybe this is a little more easy to handle than this of the framework you seems to used?

Answer 3

float: left;