Left align one button and right align two buttons in Bootstrap panel

Question

I have a panel with three buttons in the panel body. I want one button to be where it currently is (left) and I want the other two buttons to be on the far right.

The buttons currently are all aligned to the left. Below is the code I have written. I have tried numerous things including pull-right and adding button groups and clearfix, but they remain left most.

I have also tried this post: Left align and right align within div in Bootstrap

I am using bootstrapmin for both CSS and JS.

Here is the code:

<div class="row">
        <div class="form-inline">
            <div class="col-sm-5" style="width: 100%;">
                <div class="panel-group">
                    <div class="panel panel-primary">
                        <div class="panel-heading">Click 'Run' to complete the report.</div>
                        <div class="panel-body" style="background-color: lightgray;">
                            <div class="form-group">
                                <asp:Button ID="btnRun" runat="server" Text="Run" OnClick="btnRun_Click"
                                    class="btn btn-primary btn-sm"/>                                    
                                <div class="btn-group">
                                 <span class="pull-right">
                                    <asp:Button ID="btnReset" runat="server" Text="Reset" class="btn btn-primary btn-sm" />
                                    <asp:Button ID="btnExport" runat="server" Text="Export to CSV" class="btn btn-primary btn-sm" />
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

This is the code I have written and tested, I have also investigated on Bootstrap, jsfiddle.net, Google and Stack including for the past day. I am requesting assistance because I have exhausted my research. Thank you very much for your help. — The OrangeGoblin, Dec 19 '15 at 16:30
Apologies it is this https://jsfiddle.net/orangegoblin/j2gtr9k7/ — The OrangeGoblin, Dec 19 '15 at 16:46
Because I have asp buttons they are overlapping in the fiddle, but they are separated in the page. — The OrangeGoblin, Dec 19 '15 at 16:47

score 6 · Answer 1 · answered Dec 19 '15 at 17:41

<div class="panel-body" style="background-color: lightgray;">
    <div>
       <asp:Button ID="btnRun" runat="server" Text="Run" OnClick="btnRun_Click" class="btn btn-primary btn-sm" />
       <asp:Button ID="btnReset" runat="server" Text="Reset" class="btn btn-primary btn-sm myFloat_Right" />
       <asp:Button ID="btnExport" runat="server" Text="Export to CSV" class="btn btn-primary btn-sm  myFloat_Right" />
    </div>
</div>

and in your cs file add the following:

.myFloat_Right {
    float: right;
}

worked for me.

score 3 · Accepted Answer · answered Dec 19 '15 at 17:37

You were on the right track. The only thing you had to do was to use the bootstrap classes accordingly. If you pay attention, you'll see they work as a map. 1. build a container, 2. build a row, 3. build a column size, 4. build the element, 5. locate it. In this case, you had to wrap the left button in a left column, and the right btn-group in a right container with pull-left and pull-right. Mind you, in your @media responsive code you have to nullify the pull-right so that they don't look funny in a smartphone. I am assuming you are building a responsive design otherwise you wouldn't use Bootstrap. ;)

Here is a codepen for your solution enter link description here

p.s. Avoid inline styles like the plague. Specially where you have a col-sm-5 but you are forcing a width to 100%. Doesn't make any sense to do that. Use col-xs-12 if you want a 100% width

That makes sense now. I misunderstood the button groups. You also solved the problem of the layout when the screen is smaller by using col-xs-12. I will research this better. Thanks again. — The OrangeGoblin, Dec 19 '15 at 17:52

score 0 · Answer 3 · answered Dec 19 '15 at 17:26

Try this

<div class="row">
            <div class="form-inline">
                <div class="col-sm-5" style="width: 100%;">
                    <div class="panel-group">
                        <div class="panel panel-primary">
                            <div class="panel-heading">Click 'Run' to complete the report.</div>
                            <div class="panel-body" style="background-color: lightgray;">
                                <div class="pull-left">
                                    <asp:Button ID="btnRun" runat="server" Text="Run"
                                        class="btn btn-primary btn-sm" />
                                </div>
                                <div class="pull-right">

                                    <asp:Button ID="btnReset" runat="server" Text="Reset" class="btn btn-primary btn-sm" />
                                    <asp:Button ID="btnExport" runat="server" Text="Export to CSV" class="btn btn-primary btn-sm" />

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

Thank you for your response, it was nearly there, I needed to add two button groups for each button then pull the alignment. Thanks for you time though. — The OrangeGoblin, Dec 19 '15 at 17:53

Left align one button and right align two buttons in Bootstrap panel

3 Answers3