Home/ Questions/Q 8021357
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T21:57:25+00:00

I am using twitter bootstrap for my site. I would like to use progress

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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