Style like Bootstrap

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

Answer 1

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>

Answer 2

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

Answer 3

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.

 

Answer 4

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.

Answer 5

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