ibiza ibiza - 1 year ago 84
CSS Question

Bootstrap dropdown menu items missing style

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:

enter image description here

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">
<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>

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 Source

You need to add a container div with class "dropdown", here's the example from bootstrap website:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    <span class="caret"></span>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>

As you can see there is a dropdown class on the wrapper div that you're missing.


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download