Left align text but right align button inside of a panel using Bootstrap and ASP.NET

Question

I am writing my first web application using Twitter Bootstrap and ASP.NET with C# on the back-end. I have buttons and labels inside of a Bootstrap panel. I would like to align the labels to the left and the buttons to the right. Here is my code so far:

    <div class="panel panel-primary">  
                    <div class="panel-heading">
                        <h3 class="panel-title">Overview</h3>   
                    </div>
                    <div class="panel body">
                        <p>
                            <asp:Label ID="BandsProducedLabel" runat="server" Text="Bands Produced:"></asp:Label>
                            <asp:Button class="btn btn-default" ID="BandsProducedBtn" runat="server" Text="Hello" style="text-align:right" />
                        </p>
                   <\div>
    <\div>

How can I accomplish this task? This is only a small snippet of code. I have about 15 other panels that I would like to apply the same styling to.

Answer 1

If you want to use standard Bootstrap styles, you can give the label the CSS class "pull-left" and the button "pull-right".

For the correct result, you might have to reverse the source order, that is, have the button come first and then the label, in the markup.

Another option would be to use the Bootstrap grid system to place these two elements side by side.