Left align one button and right align two buttons in Bootstrap panel [closed]

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>

Answer 1

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

Answer 2

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