align twitter bootstrap progress bar and badge

badge, css, progress-bar, twitter-bootstrap, twitter-bootstrap-2

Solution

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>​

Problem

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.

Original source