Dropdown menu not showing in Bootstrap

Asked 24/12, 2012 at 15:29 Answered 7/7, 2017 at 4:2

Solved twitter-bootstrap twitter-bootstrap-2

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.

Quarterdeck answered 24/12, 2012 at 15:29 Comment(2)

can you put it in a jsfiddle? – Wisnicki 24/12, 2012 at 18:11

I'd never used jsfiddle before, so I'm not sure if everything is OK, but here it is. – Quarterdeck 24/12, 2012 at 22:26

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!

Dysgraphia answered 26/12, 2012 at 13:28 Comment(2)

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. – Quarterdeck 26/12, 2012 at 18:23

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 ;) – Dysgraphia 26/12, 2012 at 21:40

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>

Eatton answered 27/12, 2012 at 18:34 Comment(1)

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! – Quarterdeck 27/12, 2012 at 23:39

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.

Hartnett answered 24/12, 2012 at 15:48 Comment(5)

Thanks, but I believe the provided example does the required .dropdown wrapping, no? – Quarterdeck 24/12, 2012 at 17:53

Well there is no .dropdown class in default bootstrap css, so you have to do that. – Hartnett 25/12, 2012 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. – Quarterdeck 25/12, 2012 at 20:20

You have a display:none on .dropdown-menu by default. Try overriding that. – Hartnett 26/12, 2012 at 14:22

Thanks again, Miha. I think a few sections down 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! – Quarterdeck 26/12, 2012 at 18:38

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!

Osmic answered 26/12, 2012 at 6:52 Comment(2)

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.) – Quarterdeck 26/12, 2012 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. – Osmic 27/12, 2012 at 10:27

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.

Ironing answered 7/7, 2017 at 4:2 Comment(0)

Recommended topics

Hot tags