Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by rachaelallison
rachaelallison
9,521 Points

issue with bootstrap dropdown menu

Hey TeamTreehouse!

I've been working on this sample bootstrap page as my own HW, and I'm having trouble getting the drop down to actually dropdown.

I've inspected the code, made sure all my levels were correct, and checked spelling errors, typos, etc.

Any thoughts on why this wouldn't be working, team? Here's the code: 

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Drink
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li class="divider"><a href="#">A</a></li>
    <li class="divider"><a href="#">B</a></li>
    <li class="divider"><a href="#">C</a></li>
  </ul>
</div>

2 Answers

Dhavidy Luiz Mamede Pires
Dhavidy Luiz Mamede Pires
12,438 Points
Dhavidy Luiz Mamede Pires
Dhavidy Luiz Mamede Pires
12,438 Points

Are you linking a distribution of jQuery, and the bootstrap.min.js to your page?

Tim Knight
Tim Knight
28,888 Points
Tim Knight
Tim Knight
28,888 Points

As Dhavidy mentions you'll want to make sure you're loading both the Bootstrap JS and jQuery onto the page. Bootstrap uses this JavaScript to check for clicks on the button. Another thing you'll want to do is remove your divider classes. These are only needed when you're creating a menu item that is meant to break up other menu item content. So just something like this:

<div class="dropdown">
  <button class="btn btn-primary" type="button" data-toggle="dropdown">Drink
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
    <li class="divider"></li>
    <li><a href="#">D</a></li>
  </ul>
</div>

I left a divider in there so you can see how that works as well.