How to apply a bootstrap dropdown to asp.net dropdownlist control

Question

I have dropdownlist controls which are populated from database. I want to apply bootstrap dropdownlist effect to it. How can I do it. I tried form-control but only the dropdown control changes and it is not like a BS dropdown, the list is the same as the one in asp.net.

The second image is what I want. and the first one is I get when I apply form control

Code:

  <asp:DropDownList ID="ddlCType" runat="server" CssClass="form-control" DataSourceID="SqlDataSource1" DataTextField="Comp_Type" DataValueField="Type_ID"  AutoPostBack="True" OnDataBound="DDLCTypeDataBound" Style="width: 400px">

You have two images of drop downs. Which one is what you want? Which one do you currently get when applying form-control class? — jasonwarford
– jasonwarford, Commented Jan 28, 2016 at 18:25
The second one is what I want. and the first one is I get when I apply form control — AXGuy
– AXGuy, Commented Jan 28, 2016 at 18:32
The first one is what the bootstrap drop downs look like. I'm not sure what the 2nd one is. It looks like it something else or has some special CSS applied to it. — jasonwarford
– jasonwarford, Commented Jan 28, 2016 at 18:35
The list should look like this: how to do this : w3schools.com/bootstrap/… — AXGuy
– AXGuy, Commented Jan 28, 2016 at 18:38

DinoMyte · Accepted Answer · 2016-01-28 18:53:05Z

5

It seems the bootstrap 3 is not able to pick 'form-control' from the rendered html from asp.net engine. So here are the options.

Option 1 : Assign the class during page load.

<script>
    $().ready(function(){
    $('#<%=ddlCType.ClientID%>').addClass("form-control");
    });
</script>

Option 2 : : Use bootstrap-select plugin.

<asp:DropDownList ID="ddlCType" runat="server" CssClass="selectpicker" DataSourceID="SqlDataSource1" DataTextField="Comp_Type" DataValueField="Type_ID"  AutoPostBack="True" OnDataBound="DDLCTypeDataBound" Style="width: 400px">

<script>
$().ready(function(){
$('#<%=ddlCType.ClientID%>').selectpicker();
});
</script>

Example : http://jsfiddle.net/DinoMyte/wd1z0zmg/8/

answered Jan 28, 2016 at 18:53

DinoMyte

8,8781 gold badge21 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AXGuy Over a year ago

I face the same problem in option 1 .. the form control does not apply to list items. I want the list items to look like this: w3schools.com/bootstrap/…

DinoMyte Over a year ago

try option2 then. I wasn't sure about option 1

Collectives™ on Stack Overflow

How to apply a bootstrap dropdown to asp.net dropdownlist control

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related