Bootstrap with Razor DropDownList

Question

I need to apply Bootstrap styling to a Razor @Html.DropDownList.

I have applied the form-control class to the control:

@Html.DropDownList("FacilityID", null, string.Empty, new { @class = "form-control" })

This correctly displays the select list using Bootstrap stylings. The problem is that the selectable, sub-items on of the list are not styled.

In viewing the generated HTML source, the rendered options are un-styled:

<option value="1">Some Option</option>

Is there anyway to get Bootstrap to style the entire dropdown correctly in ASP.Net MVC5 Razor view?

Solution 1

If it helps anyone ... I ended up going with the bootstrap-select component.

The Razor syntax is:

@Html.DropDownList("FacilityID", null, string.Empty, new { @class = "selectpicker" })

I didn't like the default gradient applied by Bootstrap to the button element this component generates, so I modified this in CSS to make it look like a regular Bootstrap form-control styled element:

.bootstrap-select > .btn {
  background-image: none;
}

Solution 2

It's really simple just add the following to the end of the Razor DropDown:

,new { @class = "form-control" }  )