How to apply Dropdownlistfor with bootstrap?

Question

I have the following code:

@Html.DropDownListFor(model => model.CountryId, Model.AvailableCountries, new { @class = "form-control", @readonly = true })

Upshot: https://s24.postimg.org/ppjhp3gqt/07_Jan_03_00_56.jpg

I want to leave her something like this: https://s27.postimg.org/ksp1989c3/08_Jan_03_01_00.jpg

Some solution ?

Answer 1

I managed to solve it that way:

Use : https://silviomoreto.github.io/bootstrap-select/examples/#customize-menu

Then change the code:

That:

@Html.DropDownListFor(model => model.CountryId, Model.AvailableCountries, 
                             new { @class = "form-control", @readonly = true })

To:

@Html.DropDownListFor(model => model.CountryId, Model.AvailableCountries, 
                            new { @class = "form-control selectpicker", @readonly = true })