i have progressbar left , right justified badges on either side centered within row-fluid.
similar this:
here have far 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 answer align twitter bootstrap progress bar , badge.
the problem progress bar has put in div, div block element creates line break between elements around it. alter behavior, have change style of things around it.
to left badge inline progress bar, either add class="pull-left" or style="float: left;" first badge.
to right badge inline, have make sure progress bar doesn't take full width of screen bump second badge bottom. example, if 3 items inside div class span8, make progress bar have span6.
demo in jsfiddle
<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> 
Comments
Post a Comment