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.

<scriptsrc="JS/jquery.min.js"></script>
<scriptsrc="JS/bootstrap-select.js"></script>
 
<scriptsrc="JS/bootstrap.min.js"></script>
<linkhref="Bootstrap/bootstrap.css"rel="stylesheet"/>
<linkhref="Bootstrap/bootstrap-select.css"rel="stylesheet"/>
 
<linkhref="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 :

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

Code :

<asp:DropDownListID="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 :

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

1.      Dropdownlist with multi select :

Code :

    <asp:DropDownListID="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:DropDownListID="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:DropDownListID="DropDownList9"CssClass="selectpicker"multipledata-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 aboutDownload, Install and Setup environment for nodejs in Windows OS 64 bit