• Tuesday , 31 March 2020

Bootstrap tutorial 16 – Dropdowns

Code Canyon
https://i.ytimg.com/vi/Xjmhj76Jhhs/hqdefault.jpg



In this tutorial I show you how to make a dropdown in bootstrap.

Useful links:
———————————–
Don’t forget to subscribe:
www.youtube.com/QuentinWatt

Follow me on Twitter:
www.twitter.com/QuentinWatt

Follow me on Facebook:
www.facebook.com/quentin.watt

Feel free to donate:
https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=CH68DBULMJ37N
————————————

Original source

3d Ocean

Related Posts

31 Comments

  1. Tarik Hacialiogullari
    September 13, 2019 at 15:30

    When clicking on the DropDown I get this error:
    Uncaught TypeError: Bootstrap's dropdowns require Popper.js (https://popper.js.org/)
    What is that Popper thing? 😀

  2. Khan
    September 13, 2019 at 15:30

    so good to watch tutorial not from indian man))0

  3. Goku vs Vegeta
    September 13, 2019 at 15:30

    Please make a video on multi level drop down menu

  4. lightspeedlion
    September 13, 2019 at 15:30

    Got an error "Cannot read property 'setAttribute' of undefined". I was actually trying to toggle a form.

  5. yann DESDEVISES
    September 13, 2019 at 15:30

    If your dropdown menu isn't dropping down with the list items, as was mine, despite copying everything right, check out your .js links at the bottom of the page. Dropdown, if you think about it, is a form of graphic animation on the page, so likely to be linked to .js settings.
    In my case, the first .js link at the bottom was just missing a "." before "js"! I can't remember where I had copied the link from but this could be the problem with yours too!

  6. Rj Gucela
    September 13, 2019 at 15:30

    Mine is not working please help 🙁

  7. Raheel Yousafzai
    September 13, 2019 at 15:30

    really like your videos, great and simple 🙂

  8. The Web Master
    September 13, 2019 at 15:30

    When I click on the drop-down button, it does not show the list items. I have triple-checked the code in comparison to yours and the file directory and it still isn't working. And it's also just an ugly HTML5 list too.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Tutorial 16 – Dropdown</title>
    <!– Latest compiled and minified CSS –>
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!– Optional theme –>
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">

    <link rel="stylesheet" type="text/css" href="css/main.css">
    </head>
    <body>
    <div class="container">
    <div class="row">
    <div class="col-xs-12">
    <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelled-by="dropdownmenu">
    <li><a href="#">Some text</a></li>
    <li><a href="#">Some more text</a></li>
    <li><a href="#">Something more</a></li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    <!–js link should always be at the bottom–>
    <!–jquery link must be on top of js link–>
    <script src="js/jquery.min.js"></script>
    <!– Latest compiled and minified JavaScript –>
    <script src="js/bootstrap.min.js"></script>
    </body>
    </html>

    Please Help! Thanks.

  9. Bushra Burney
    September 13, 2019 at 15:30

    My dropdown didn't work. All the other tutorials worked out fine but this one is causing me problem. When I click the dropdown button, the dropdown menu doesn't appear. I copied the exact code, What do I do?

  10. Samir mujawar
    September 13, 2019 at 15:30

    Awesome series for new web dev learners !!! Thanks for posting these videos !!!

  11. John Roncales
    September 13, 2019 at 15:30

    What is dat application you using ?

  12. Russell Jones
    September 13, 2019 at 15:30

    Drop down wasn't working. Turned out I had moved the bootstrap.min.js into a subfolder some time ago who modifying my folder structure. Missed this link when updating. Updated and its now working.

  13. Justin Du
    September 13, 2019 at 15:30

    I have implemented a dropdown on my site. However, when I click on one link on the drop down and it shows the tab content (using tab and pane), and then click on another link on the same dropdown, both of them highlight blue (active). How do I prevent this from happening?

  14. Hairy Haggis
    September 13, 2019 at 15:30

    DROPDOWN NOT DISPLAYING SOLVED!

    JQuery 3 does not work for this lesson. Reverting back to JQuery 2 will get the dropdown to work correctly.

  15. roshan arr
    September 13, 2019 at 15:30

    @quentin watt
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charst="utf-8">
    <title>Dropdowns</title>
    <!– we link the CDN css files here –>
    <!– Latest compiled and minified CSS –>
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!– Optional theme –>
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">

    </head>
    <body>

    <div class="container">
    <div class="row">
    <div class="col-xs-12">
    <div class="dropdown ">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownmenu" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>

    </button>
    <ul class="dropdown-menu" aria labelledby="dropdownmenu">
    <li><a href="#">some text</a></li>
    <li><a href="#">some more text</a></li>
    <li><a href="#">some more more text</a></li>

    </ul>
    </div>

    </div>

    </div>

    </div>

    <script src="js/jquery-3.0.0.min.js"></script>
    <!– Latest compiled and minified JavaScript –>
    <script type="text/javascript" src="js/bootstrap.min.js"</script>
    </body>
    </html>
    the sa,me code .but it is not working

  16. Ageel Shatry
    September 13, 2019 at 15:30

    My dropdown isn't displaying the list items. I compared the code 3 times. Not seeing my mistake. See code below. Please help!
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Dropdown Menu</title>
    <!– Latest compiled and minified CSS –>
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <!– Optional theme –>
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">

    </head>
    <body>
    <div class="container">
    <div class="row">
    <div class="col-xs-12">
    <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownmenu" data-toggle='dropdown'>
    Dropdown
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelled-by="dropdownmenu">
    <li><a href="#">Some text</a></li>
    <li><a href="#">Something else</a></li>
    <li><a href="#">Something else completely</a></li>
    </ul>
    </div>

    </div>

    </div>
    </div>

    <script src="js/jquery.min.js"></script>
    <!– Latest compiled and minified JavaScript –>
    <script src="js/bootstrap.min.js"></script>
    </body>
    </html>

  17. wfn00b
    September 13, 2019 at 15:30

    i had problem trying to run dropdowns using jquery 3, didnt worked, i just had to use a previous version 2.x to fix it

  18. Wesley Rebelo
    September 13, 2019 at 15:30

    I didnt understand the attribute data-toggle . Could you please do more details about it?

  19. Southampton Boyz
    September 13, 2019 at 15:30

    Hi. Is it just aria-labelled-by in Bootstrap and aria-labelledby otherwise?

  20. Kapil Kushwaha
    September 13, 2019 at 15:30

    These vid. are really good enough!!
    But i'm getting a problem that "data-toggle" attribute is not working in notepad++,and not only data-toggle but many more,why so?
    Is there any solution.Plzz do help

  21. Aristocrat Cell
    September 13, 2019 at 15:30

    When will we get tutorial no 17???

  22. Intent Jhb
    September 13, 2019 at 15:30

    Great tuts Quentin! more please

  23. programming
    September 13, 2019 at 15:30

    god bleess you. you aren't using notepad anymore

  24. Charles Wright
    September 13, 2019 at 15:30

    When is the next tutorial coming?

  25. ismet glu
    September 13, 2019 at 15:30

    hi, thank for videos, where is navbar turtorial?

  26. AndreAgonia
    September 13, 2019 at 15:30

    Hi man, I saw the first couple of videos and I really like them. One thing I wonder is: how much videos do you have planned total and will you do a final summary video maybe creating a "real" simple single page website?

    That would add a lot to the tutorial in my opinion and that's something I'm interested in, you're really good at explaining this stuff but a real case video would be awesome!

  27. Kakar Nyori
    September 13, 2019 at 15:30

    When are you planning to do tuts on navbar and other stuff? Waiting…

  28. jasonc_tutorials
    September 13, 2019 at 15:30

    how do you like your mac? i'm planning to get one. Just for video editing and logic though. Programmin always on PC.

  29. afghan boy
    September 13, 2019 at 15:30

    hi young man !
    are you going to continue this tutorial tell end or not ?

  30. HookemHorns972
    September 13, 2019 at 15:30

    I have a question, where did the  jquery.min.js file come from? I can't seem to find it. Did you create it yourself?

Leave A Comment

You must be logged in to post a comment.