Geek asks and answers

Align twitter bootstrap progress bar and icon

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

In the progress bar, I want to display the name that is in the process, and use the icon either at the end or at the beginning of the progress bar to display the percentage of completion. Here is a link to the JS script for what I'm 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 byte and progress bar do not align side by side. I am not very good at css, so I'm not sure what I can do to align them on the same line.

+5
source share
1 answer

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

More articles:


All Articles