Home > DeveloperSection > Blogs > Dropdownlist Using BootStrap in ASP.Net

Dropdownlist Using BootStrap in ASP.Net


Bootstrap Bootstrap 
Ratings:
9 Comment(s)
 55769  View(s)
Rate this:

Dropdownlist Using BootStrap in ASP.Net


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


How to manage server-side event

By Massimiliano Sorrentino on   2 years ago

Hi,

i guess how to trigger the selectedindexchanged event for dropdownlist.

Any suggestion?

Thanks in advance


Get multiple selected values from dropdownlist to C# code.

By Shashishekar B S on   2 years ago

Hi Kamalakar,

 

  Thanks for the great post. I am able to see the dropdownlist with selectPicker, but the issue I am facing is "I am not able to get multiple selected values of dropdownlist in C# code behind". Can you please let me know how can we achieve this?

Thanks in Advance.

Regards,

Shashishekar B S


unable to download

By krishan kumar on   2 years ago
Hi, '

please tell me how can i download all js files ?

Download All js file and css file

By Kamlakar Singh on   2 years ago
I hope these links very helpfull for Mr. Krishan Kumar download js file

Download bootstrap all js file and css file 

Download bootstrap-select.js and bootstrap-select.css

Download latest jquery file

Nice Article

By Pawan Shukla on   one year ago
Nice Article

How to use in a UpdatePanel

By Carlos Tax on   one year ago
When the UpdatePanel refresh doesn't work the selectpicker, How to make it work? thanks 

Project of Example

By Jose Israel Ble Gonzalez on   one year ago

Please, send to project example  to jibleg@gmail.com
congratulation for excellent site.

Thanks Kamlakar it is useful article

By ashish srivastava on   one year ago
Thanks  Kamlakar it is helphul article about Dropdownlist using BootStrap in ASP.Net

CSS

By Thiyagu Arockiasamy on   7 months ago
Bostrab css not working properly. how to download it css and js scripts

Don't want to miss updates? Please click the below button!

Follow MindStick