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
Haydn Morris
9,187 PointsDropdown menu displaying (with correct formatting) but won't open
Up to now (putting the dropdown menu into the footer) everything has worked fine. When I copy the code from the Bootstrap documentation, it puts the dropdown menu into the page (with correct formatting and functioning pseudo classes) but it won't open when I click it. What could be causing the problem?
- I'm using Bootstrap 4.0.0-beta (this is included in the code)
Dropdown code:
<div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown button </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <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> </div>
Included scripts:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
Note: I also tried this with the dropdown button group, as well as the single one for which I have put the code above. Both had the same result.
Any help would be much appreciated, thanks!
1 Answer
Patrik Horváth
11,110 Pointsyour Scripts are from ALPHA but you use BETA ...., this course HERE is for ALPHA and its not Actuala and Should be deleted like LARAVEL 4 and few more because people get confused
Bootstrap 4 Beta use "popper" no "tether" also you use OLD JQuery check PREREQUESTS :)
https://getbootstrap.com/ Here you can find latest info CSS:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
Scripts :
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
AND ALWAYS check CONSOLE LOGS before you start PROJECTS there you will see whot is missing :)
Haydn Morris
9,187 PointsAwesome, that works fine now. Thanks a lot. I had been thinking the same to be honest, up to this point I've basically had to stop the video every time he adds a new component to find the new code for it.
Patrik Horváth
11,110 Pointsthis is for BETA and its ACTUAL : https://getbootstrap.com/docs/4.0/getting-started/introduction/
there you can find Dropdowns butttons and alll tags from bootstrap its amazing documentation :)
DropDown : https://getbootstrap.com/docs/4.0/components/dropdowns/
Haydn Morris
9,187 PointsHaydn Morris
9,187 PointsApologies for the un-formatted code, I thought it would auto-format. The code is only the bootstrap docs dropdown and the version of jquery and bootstrap I'm using...