In this blog, I’m explaining how to make dropdownlist using bootstrap in asp.net.

Step 1.

 Create a empty website and add new item then choose web form click Add button

Step 2.

 Open toolbox drag a dropdownlist drop in default.aspx page

Step 3.

<script src="JS/jquery.min.js"></script>
<script src="JS/bootstrap-select.js"></script>
 
<script src="JS/bootstrap.min.js"></script>
<link href="Bootstrap/bootstrap.css" rel="stylesheet" />
<link href="Bootstrap/bootstrap-select.css" rel="stylesheet" />
 
<link href="Bootstrap/bootstrap.min.css" rel="stylesheet" />

 Download and add the above three javascript file and three .css file into your projects   because it’s mandatory for using the bootstrap libraries and methods.

    Before using bootstrap file dropdownlist look like this :

Use this method :

<script type="text/javascript">
    $(document).ready(function () {
        $(".selectpicker").selectpicker();
    });
</script>

Code :

<asp:DropDownList ID="DropDownList1" CssClass="selectpicker" runat="server">
     <asp:ListItem>Allahabad</asp:ListItem>
      <asp:ListItem>Kanpur</asp:ListItem>
      <asp:ListItem>Rewa</asp:ListItem>
      <asp:ListItem>Bhopal</asp:ListItem>
      <asp:ListItem>Indore</asp:ListItem>
      <asp:ListItem>Jabalpur</asp:ListItem>
   </asp:DropDownList>

After using bootstrap file and method dropdownlist look like this :

 

1.      Dropdownlist with option group like this:

Code :

 <select class="selectpicker">
    <option>---Select---</option>
    <optgroup label="Uttar Pradesh">
  <option>Allahabad</option>
   <option>Kanpur</option>
     <option>Lucknow</option>
  </optgroup>
    <optgroup label="Madhya Pradesh">
       <option>Rewa</option>
       <option>Indore</option>
  <option>Jabalpur</option>
        <option>Bhopal</option>
          </optgroup>
       <optgroup label="Other">
      <option>Delhi</option>
        <option>Mumbai</option>
      </optgroup>
     </select>

1.      Dropdownlist with multi select :

 

Code :

    <asp:DropDownList ID="DropDownList2" CssClass="selectpicker" runat="server" multiple>
           <asp:ListItem>Allahabad</asp:ListItem>
           <asp:ListItem>Kanpur</asp:ListItem>
           <asp:ListItem>Rewa</asp:ListItem>
           <asp:ListItem>Bhopal</asp:ListItem>
           <asp:ListItem>Indore</asp:ListItem>
           <asp:ListItem>Jabalpur</asp:ListItem>
     </asp:DropDownList>

1.      Dropdownlist with different  style like this :

Code :

1.       data-style="btn-primary"

2.       data-style="btn-info"

3.       data-style="btn-success"

4.       data-style="btn-warning"

5.       data-style="btn-danger"

6.       data-style="btn-inverse"

<asp:DropDownList ID="DropDownList3" CssClass="selectpicker" data-style="btn-primary" runat="server">
         <asp:ListItem>Allahabad</asp:ListItem>
         <asp:ListItem>Kanpur</asp:ListItem>
         <asp:ListItem>Rewa</asp:ListItem>
         <asp:ListItem>Bhopal</asp:ListItem>
         <asp:ListItem>Indore</asp:ListItem>
         <asp:ListItem>Jabalpur</asp:ListItem>
</asp:DropDownList>

1.    DropDownlist : To Show number of selected items from total number of items

 

Code :

<asp:DropDownList ID="DropDownList9" CssClass="selectpicker" multiple data-selected-text-format="count" runat="server">
        <asp:ListItem>Allahabad</asp:ListItem>
        <asp:ListItem>Kanpur</asp:ListItem>
        <asp:ListItem>Rewa</asp:ListItem>
        <asp:ListItem>Bhopal</asp:ListItem>
        <asp:ListItem>Indore</asp:ListItem>
        <asp:ListItem>Jabalpur</asp:ListItem>
   </asp:DropDownList>

in my next post i'll explain about Download, Install and Setup environment for nodejs in Windows OS 64 bit