Dropdown menu not showing in Bootstrap

Question

I'm trying to get a basic dropdown menu in Bootstrap:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <div class="dropdown">
      <!-- Link or button to toggle dropdown -->
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li><a tabindex="-1" href="#">Action</a></li>
        <li><a tabindex="-1" href="#">Another action</a></li>
        <li><a tabindex="-1" href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a tabindex="-1" href="#">Separated link</a></li>
      </ul>
    </div>

  </body>
</html>

However, nothing shows up. I know the local CSS and JS files are being referred correctly. As far as I understand, the default JS includes all the plugins.

EDIT: Thanks to all for your feedback. I can only add, in case people find themselves in the same situation I am, to move further down in the tutorial before copying and pasting the snippets.

I'd never used jsfiddle before, so I'm not sure if everything is OK, but [here](http://jsfiddle.net/YNguG/) it is. — ezequiel-garzon, Dec 24 '12 at 22:26

David Taiaroa · Accepted Answer · 2014-04-24T11:16:36.230

17

I think your code was basically good, but you are missing a link to trigger the drop down. See ths jsFiddle

Note that I added

<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>

Here's an example of how to include it in a complete nav bar

Good luck!

edited Apr 24 '14 at 11:16

answered Dec 26 '12 at 13:28

David Taiaroa

25,157
7
62
50

1

Thanks a lot... It's a frustrating enterprise trying to learn Bootstrap. I would expect official snippets to be self-contained but, alas, I guess they expect you to know what you're doing. Any advice on how to acquire the minimal HTML/CSS/JS knowledge in order to properly harness Bootstrap will be appreciated. Thanks again. – ezequiel-garzon Dec 26 '12 at 18:23
5

I know what you mean about use of the snippets not always being as simple as you might expect. I've found myself inspecting a lot of HTML and CSS source code to fill in the blanks. I'm starting to appreciate the logic behind how the styling and scaffolding work though so it's all getting easier with time ;) – David Taiaroa Dec 26 '12 at 21:40

score 4 · Answer 2 · edited Oct 19 '18 at 13:39

Please pay extra attention to comment <-- Link or button to toggle dropdown --> in you code. You need to put a Link or button with data-toggle="dropdown" property to activate the Dropdown.

Try this :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="dropdown">
  <!-- Link or button to toggle dropdown -->

  <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
    <i class="icon-user"></i> TestDropdown
    <span class="caret"></span>
  </a>
  <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#">
    <i class="icon-user"></i> TestDropdown
    <span class="caret"></span>
  </a>
  <a class="btn btn-default" data-toggle="dropdown"> Dropdown Test </a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

Thanks for such a clear example. It taught me that several buttons/links can trigger the same dropdown, as well as some idiosyncrasies about Bootstrap docs! — ezequiel-garzon, Dec 27 '12 at 23:39

score 3 · Answer 3 · edited Jul 24 '17 at 17:30

3

From the docs:

Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then just create the menu.

So you probably need to set the CSS for your dropdown class to have (at least) position: relative;. Also you have a display:none on .dropdown-menu by default. Try also overriding that.

edited Jul 24 '17 at 17:30

budi

6,351
10
55
80

answered Dec 24 '12 at 15:48

Miha Rekar

1,237
12
15

Thanks, but I believe the provided example does the required .dropdown wrapping, no? – ezequiel-garzon Dec 24 '12 at 17:53
1

Well there is no `.dropdown` class in default bootstrap css, so you have to do that. – Miha Rekar Dec 25 '12 at 11:27
Thanks again, but this doesn't fix it. In any case, my (unminified) `bootstrap.css` has, spread between lines 2840 and 2843, the declaration `.dropup, .dropdown { position: relative; }`. I added your suggestion manually, to no avail. – ezequiel-garzon Dec 25 '12 at 20:20
1

You have a `display:none` on `.dropdown-menu` by default. Try overriding that. – Miha Rekar Dec 26 '12 at 14:22
1

Thanks again, Miha. I think [a few sections down](http://twitter.github.com/bootstrap/components.html#buttonGroups) there is a fuller example of how dropdowns are meant to be used. I know I've been a grumpy old man, but... this piecemeal approach is disconcerting when applied to a technical product. I guess one is supposed to read all the docs before trying the stuff. Further, my CSS knowledge is well behind yours, but precisely I was hoping a *very* rough understanding of CSS would allow me to use Bootstrap *instead* of tweaking the CSS itself! Oh, well... Thanks once more! – ezequiel-garzon Dec 26 '12 at 18:38

Rajarshi · Answer 4 · 2012-12-26T10:29:57.697

2

Instead of div,try a parent ul and li to wrap your ul that you have posted above. for example,

    <ul class="nav nav-pills span7 pull-right" id="upper_username_hide">
       <li class= "dropdown" data-dropdown="dropdown">
         <a id="" class="dropdown-toggle" data-toggle="dropdown" href="#">
          <b class="caret dropdown-toggle"></b>
         </a>
         <ul class="dropdown-menu" >
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
        </ul>
      </li>
    </ul>

I dont think tab-index will be necessary as bootstrap css takes care of that. Good luck!

edited Dec 26 '12 at 10:29

answered Dec 26 '12 at 06:52

Rajarshi

381
3
10

Thanks! At the risk of throwing around many open-ended questions in comments... How do you go about building your understanding of Bootstrap usage? Any recommended resources besides the official documentation? (The tabindex settings were copied verbatim from the official snippet.) – ezequiel-garzon Dec 26 '12 at 18:30
Creating and experimenting with the bootstrap classes is always the best way for this,but when you're at a loss,try inspecting code from some existing sites already using twitter bootstrap. – Rajarshi Dec 27 '12 at 10:27

score 1 · Answer 5 · answered Jul 07 '17 at 04:02

1

In my case I discovered the .dropdown-menu bootstrap class had set the top property to:top: 100%, that caused that the dropdown was shown outside the viewport. I did override the top value with another class and now is working.

answered Jul 07 '17 at 04:02

Ruben

816
1
8
21

Dropdown menu not showing in Bootstrap

5 Answers5