Twitter Bootstrap ProgressBar with Badge on left and right

I would like to have a progressbar with left and right justified badges on either side that is centered within a row-fluid.

Similar to this:

<img src="https://s21.postimg.org/yg3igspaf/example.png" alt="" />

Here is what I have so far which is not working.

<div class='row-fluid'>
   <div class="span12" style="">
      <span class="badge" style="position: relative;">X</span>
      <div class="progress" style="position: relative; margin: 0 auto;width:50%;">
         <div class="bar" style="width:10%;"></div>
      </div>
      <span class="badge" style="position: relative;">0</span>
   </div>
</div> 

Check out the answer to align twitter bootstrap progress bar and badge.

The problem is that the progress bar has to be put in a div, but div is a block element so it creates a line break between the elements around it. To alter this behavior, you have to change the style of the things around it.

To get the left badge inline with the progress bar, either add Class="pull-left" or Style="float: left;" to the first badge.

To get the right badge inline, you have to make sure the progress bar doesn't take up the full width of the screen which will bump the second badge to the bottom. For example, if all three items were inside a div with class span8, only make the progress bar have span6.

Demo in jsFiddle

<!-- language: lang-html -->

<div class="span8">
    <span class="badge pull-left">X</span>
    <div class="progress span6" >
        <div class="bar" style="width:10%;"></div>
    </div>
    <span class="badge">0</span>
</div>