align twitter bootstrap progress bar and badge

css twitter-bootstrap progress-bar badge twitter-bootstrap-2
Neel picture Neel · Jun 3, 2012 · Viewed 14.9k times · Source

I am using twitter bootstrap for my site. I would like to use progress bar to indicate the percentage completion of the process.

In the progress bar I want to display the name the step in process and use a badge either at the end or start of progress bar to display the percent complete. Here is the JS fiddle link for what I am trying to do

http://jsfiddle.net/KBTy7/12/

<div id="coolstuff" style="margin-top: 10px;">
    <span class="badge" style="padding: 3px; width: 10px">10%</span>
    <div class="progress" id="prgbar">
        <div title="PO Details" class="bar" style="width: 20%;" id="prgwidth">Add New PO Detail</div>
    </div><!-- end of progress bar -->
</div> <!-- end of cool stuff -->

But the bade and progress bar don't get aligned side by side. I am not very good at css so I am not sure what I can do to align them in the same row.

Answer

Zoltan Toth picture Zoltan Toth · Jun 3, 2012

Try this - http://jsfiddle.net/KBTy7/412/

<html>
    <body>
        <div id="coolstuff" style="margin-top: 10px;">
            <span class="badge" style="padding: 3px; float: left; width: 25px; text-align: center;">10%</span>
            <div class="progress" id="prgbar">
                <div title="PO Details" class="bar" style="width: 20%;" id="prgwidth"> Add New PO Detail </div>
            </div><!-- end of progress bar -->
        </div> <!-- end of cool stuff -->
    </body>
</html>​

Related questions

Twitter Bootstrap: Center Text on Progress Bar

I've been using Twitter's bootstrap and I would like the text on the progress bar to be centered on the on bar regardless of value. The below link is what I have now. I would like all text to be …

Read More
Center a column using Twitter Bootstrap 3

How do I center a div of one column size within the container (12 columns) in Twitter Bootstrap 3? I want a div, with a class .centered to be centered within the container. I may use a row if there are multiple …

Read More
vertical-align with Bootstrap 3

I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link: The grid system in Bootstrap uses float: left, not display:inline-block, so the property vertical-align doesn't work. I tried using …

Read More