locked
Style like Bootstrap RRS feed

  • Question

  • User-1499457942 posted

    Hi

      How to style like Bootstrap below code

    <div style="font-size:8pt; font-family:Verdana;">
                       <div id="left" style="float:left;">
                          <span>Show Page </span>
                          <asp:DropDownList ID="ddlPageNumber" runat="server"
                             AutoPostBack="true"
                             ></asp:DropDownList>
                          <span> of</span>
                          <asp:Label ID="lblShowRecords" runat="server"></asp:Label>
                          <span>Pages </span>
                       </div>
                       <div id="right" style="float:right;">
                          <span>Display </span>
                          <asp:DropDownList ID="ddlPageSize"
                                runat="server"
                                AutoPostBack="true"
                                OnSelectedIndexChanged="PageSize_Changed">
                             <asp:ListItem Text="1" Value="1"></asp:ListItem>
                             <asp:ListItem Text="5" Value="5"></asp:ListItem>
                             <asp:ListItem Text="10" Value="10"
                                           Selected="true"></asp:ListItem>
                             <asp:ListItem Text="20" Value="20"></asp:ListItem>
                             <asp:ListItem Text="25" Value="25"></asp:ListItem>
                             <asp:ListItem Text="50" Value="50"></asp:ListItem>
                          </asp:DropDownList>
                          <span> Records per Page</span>
                       </div>
                    </div>

    Thanks

    Thursday, November 1, 2018 3:46 PM

All replies

  • User2103319870 posted

    Bootstrap styles works well with Asp.net Controls as well. An easy option is to assign the common form-ctontrol class to style the controls

    <div style="font-size: 8pt; font-family: Verdana;">
                    <div id="left" style="float: left;">
                        <span>Show Page </span>
                        <asp:DropDownList ID="ddlPageNumber" runat="server" CssClass="form-control"
                            AutoPostBack="true">
                        </asp:DropDownList>
                        <span>of</span>
                        <asp:Label ID="lblShowRecords" runat="server" CssClass="form-control"></asp:Label>
                        <span>Pages </span>
                    </div>
                    <div id="right" style="float: right;">
                        <span>Display </span>
                        <asp:DropDownList ID="ddlPageSize" CssClass="form-control"
                            runat="server"
                            AutoPostBack="true">
                            <asp:ListItem Text="1" Value="1"></asp:ListItem>
                            <asp:ListItem Text="5" Value="5"></asp:ListItem>
                            <asp:ListItem Text="10" Value="10"
                                Selected="true"></asp:ListItem>
                            <asp:ListItem Text="20" Value="20"></asp:ListItem>
                            <asp:ListItem Text="25" Value="25"></asp:ListItem>
                            <asp:ListItem Text="50" Value="50"></asp:ListItem>
                        </asp:DropDownList>
                        <span>Records per Page</span>
                    </div>
                </div>
            </div>

    Thursday, November 1, 2018 4:17 PM
  • User-1499457942 posted

    Hi

     It is displaying in multiple rows like

    Display then dropdown on next line then on next line Records per page . Similarly the other dropdown

    Thanks

    Thursday, November 1, 2018 4:54 PM
  • User-2054057000 posted

    Bootstrap comes with lots of pre-built css that you can apply to your web page. First you have to add Bootstrap to your web page, see What is Bootstrap which will guide you how to add this framework. Now you can apply these css like:

    1. .alert-primary .alert-secondar

    <div class="alert alert-primary" role="alert">
      A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </div>
    <div class="alert alert-secondary" role="alert">
      A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </div>

    The above css will give the divs light blue and light purple color.

    2. .btn .btn-primary .btn-secondary - these are the classes for buttons

    Example:

    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>

    Kindly check the full official bootstrap documents given here.

     

    Sunday, November 4, 2018 11:20 AM
  • User-2054057000 posted

    Hi

     It is displaying in multiple rows like

    Display then dropdown on next line then on next line Records per page . Similarly the other dropdown

    Thanks

    You have to apply Grid System in bootstrap so that the control come on the same line. 

    Example - these are 3 columns that come on the same line.

    <div class="container">
      <div class="row">
        <div class="col-sm">
          One of three columns
        </div>
        <div class="col-sm">
          One of three columns
        </div>
        <div class="col-sm">
          One of three columns
        </div>
      </div>
    </div>

    Check the grid system documents here.

    Sunday, November 4, 2018 11:23 AM
  • User-893317190 posted

    Hi JagjitSingh,

    You could also use bootstrap's flex utility to make a layout.

    Below is my code.

    <div style="font-size:8pt; font-family:Verdana;" class="d-flex justify-content-between">
                       <div id="left" >
                          <span>Show Page </span>
                          <asp:DropDownList ID="ddlPageNumber" runat="server"
                             AutoPostBack="true"
                             ></asp:DropDownList>
                          <span> of</span>
                          <asp:Label ID="lblShowRecords" runat="server"></asp:Label>
                          <span>Pages </span>
                       </div>
                       <div id="right" >
                          <span>Display </span>
                          <asp:DropDownList ID="ddlPageSize"
                                runat="server"
                                AutoPostBack="true"
                            >
                             <asp:ListItem Text="1" Value="1"></asp:ListItem>
                             <asp:ListItem Text="5" Value="5"></asp:ListItem>
                             <asp:ListItem Text="10" Value="10"
                                           Selected="true"></asp:ListItem>
                             <asp:ListItem Text="20" Value="20"></asp:ListItem>
                             <asp:ListItem Text="25" Value="25"></asp:ListItem>
                             <asp:ListItem Text="50" Value="50"></asp:ListItem>
                          </asp:DropDownList>
                          <span> Records per Page</span>
                       </div>
                    </div>

    The result.

    For more information about layout using flex, you could refer to

    https://getbootstrap.com/docs/4.1/utilities/flex/

    Best regards,

    Ackerly Xu

    Thursday, November 8, 2018 4:17 AM