How to inline Bootstrap 3 progress bars?

Question

I want to be able to put some inline element right next to a Bootstrap 3 progress bar like following:

Some inline element [progress bar]
Some inline element [progress bar]
Some inline element [progress bar]

I've tried the following with no luck:

• Adding display: inline - bar not showing
• Adding float: right - bar not showing
• Using tables to achieve the layout - bar not showing inside <td>

Here's the bootply with my attemps: http://www.bootply.com/9jNcnGRkUK

Answer 1

You can apply the Grid system as following:

<div class="container">
  <div class="row"> 
    <h3>inline</h3>
    <span class="col-sm-3">Some inline element</span>
    <div class="progress" class="col-sm-9">
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
        <span class="sr-only">45% Complete</span>
      </div>
    </div>
  </div>  
</div>

Try it your self. Note that the col-sm-* class should be put within the row class.

Answer 2

Why inline? I've tried inline-block with a specified width and it works fine: http://www.bootply.com/LsNz4F87Np