Bootstrap dropdown menu items missing style

Question

If I do a search for the class "dropdown-item", I get no results even in the bootstrap.css or .js. Where is this class?

Here's what I get:

With the following code:

        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Action
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </div>

I also have my scripts in the correct order:

<script src="scripts/jquery-3.1.0.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>

and the css:

<link rel="stylesheet" type="text/css" href="Content/bootstrap.min.css" />

All my other controls (navbar, buttons, button groups, etc.) are working well so bootstrap seems to be correctly initialized.

Answer 1

You need to utilize ul and li elements in your dropdown. See your working CODE HERE and below.

<div class="dropdown">
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
             <li><a class="dropdown-item" href="#">Another action</a></li>
             <li><a class="dropdown-item" href="#">Something else here</a></li>
             <div class="dropdown-divider"></div>
             <li><a class="dropdown-item" href="#">Separated link</a></li>
        </ul>
    </div>
</div>