CODEWITHSUNDEEP
asp.net-mvctwitter-bootstraprazor
Patrick
Patrick

Reputation: 5836

Bootstrap with Razor DropDownList

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?

Upvotes: 5

Views: 18089

Answers (2)

shad0w953o4
shad0w953o4

Reputation: 21

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

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

Upvotes: 2

Patrick
Patrick

Reputation: 5836

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;
}

Upvotes: 8

Related Questions