locked
Button RRS feed

  • Question

  • User-1499457942 posted

    Hi

      I have below code & i want to display 1 more button at the right in end

    <div class="col-sm-12">
    <div class="btn-toolbar col-sm-2" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group" role="group">
    <asp:Button ID="btnSave" CssClass="btn btn-primary" runat="server" class="btn btn-primary" Text=" Update " OnClick="Save_Click"></asp:Button>
    </div>
    <div class="btn-group" role="group">
    <asp:Button ID="btnCancel" CssClass="btn btn-primary" runat="server" class="btn btn-primary" Text=" Cancel " CausesValidation="False" OnClick="Cancel_Click"></asp:Button>
    </div>
    </div>
    </div>

    Thanks

    Thursday, November 15, 2018 4:23 PM

Answers

  • User283571144 posted

    Hi JagjitSingh,

    According to your description, I suggest you could use pull-right into the class attribute and let bootstrap arrange the buttons.

    More details, you could refer to below codes:

        <div  class="row">
                <div class="col-sm-12">
            <div class="btn-toolbar col-sm-2" role="toolbar" aria-label="Toolbar with button groups">
                <div class="btn-group" role="group">
                    <asp:Button ID="btnSave" CssClass="btn btn-primary" runat="server" class="btn btn-primary" Text=" Update "></asp:Button>
                </div>
                <div class="btn-group" role="group">
                    <asp:Button ID="btnCancel" CssClass="btn btn-primary" runat="server" class="btn btn-primary" Text=" Cancel " CausesValidation="False"></asp:Button>
                </div>
            </div>
                     <div class="btn-group pull-right" role="group">
                    <asp:Button ID="Button1" CssClass="btn btn-primary" runat="server" class="btn btn-primary" Text=" Update "></asp:Button>
                </div>
           </div>
    
        </div>

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 16, 2018 1:05 PM

All replies

  • User283571144 posted

    Hi JagjitSingh,

    According to your codes, I found you use bootstarp grid.

    This feature will divides the div into 12 containers according to browser width. Col-sm-2 means 2 containers.

    If the div contains three buttons, it may exceed the div’s width.

    You could use F12 develop tool to see it.

    I suggest you could try to modify the div class to increase the div’s width, then it will work well.

    More details, you could refer to below codes:

    <form id="form1" runat="server">
          <div class="col-sm-12">
    <div class="btn-toolbar col-sm-6" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group" role="group">
    <asp:Button ID="btnSave" CssClass="btn btn-primary" runat="server" class="btn btn-primary" Text=" Update "></asp:Button>
    </div>
    <div class="btn-group" role="group">
    <asp:Button ID="btnCancel" CssClass="btn btn-primary" runat="server" class="btn btn-primary" Text=" Cancel " CausesValidation="False"></asp:Button>
    </div>
        <div class="btn-group" role="group">
    <asp:Button ID="Button1" CssClass="btn btn-primary" runat="server" class="btn btn-primary" Text=" Update "></asp:Button>
    </div>
    </div>
    

    Result:

    Best Regards,

    Brando

    Friday, November 16, 2018 8:52 AM
  • User-1499457942 posted

    Hi Brando

       I want 2 button together and third one at the right end of the Screen. Not after 2 Buttons.

    Thanks

    Friday, November 16, 2018 9:11 AM
  • User283571144 posted

    Hi JagjitSingh,

    According to your description, I suggest you could use pull-right into the class attribute and let bootstrap arrange the buttons.

    More details, you could refer to below codes:

        <div  class="row">
                <div class="col-sm-12">
            <div class="btn-toolbar col-sm-2" role="toolbar" aria-label="Toolbar with button groups">
                <div class="btn-group" role="group">
                    <asp:Button ID="btnSave" CssClass="btn btn-primary" runat="server" class="btn btn-primary" Text=" Update "></asp:Button>
                </div>
                <div class="btn-group" role="group">
                    <asp:Button ID="btnCancel" CssClass="btn btn-primary" runat="server" class="btn btn-primary" Text=" Cancel " CausesValidation="False"></asp:Button>
                </div>
            </div>
                     <div class="btn-group pull-right" role="group">
                    <asp:Button ID="Button1" CssClass="btn btn-primary" runat="server" class="btn btn-primary" Text=" Update "></asp:Button>
                </div>
           </div>
    
        </div>

    Result:

    Best Regards,

    Brando

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, November 16, 2018 1:05 PM