Search code examples
csstwitter-bootstrapprogress-barbadgetwitter-bootstrap-2

align twitter bootstrap progress bar and badge

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.

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