How to apply bootstrap dropdown list style to dropdown menu in mvc razor

Question

I am trying to apply a bootstrap style (same as the one listed here ) in the drop down list. I use razor syntax to display a drop down list. Drop-down list items come from another .cs file.
I have been following some of the posts here in SO, but still not getting the right way to do this.
It simply displays as a drop-down plan without applying a boot style.

<div class="col-md-2 col-lg-2">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
            @Html.DropDownListFor(m => m.Menu, new SelectList(Dropdown.DDMenu(), "Value", "Text"), new { @class = "form-control" })
        </button>

</div>

The popup menu does not appear when I add <button></button>, but when I delete it, it works.

Answer 1

I mean something like this

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
        Dropdown Example
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        @foreach (var item in Dropdown.DDMenu())
        {
            <li><a href="#" data-value="@item.Value">@item.Text</a></li>
        }
    </ul>
</div>