Bootstrap tutorial 16 – Dropdowns


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

31 thoughts on “Bootstrap tutorial 16 – Dropdowns

  • September 13, 2019 at 15:30
    Permalink

    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!

  • September 13, 2019 at 15:30
    Permalink

    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.

  • September 13, 2019 at 15:30
    Permalink

    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?

  • September 13, 2019 at 15:30
    Permalink

    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.

  • September 13, 2019 at 15:30
    Permalink

    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?

  • September 13, 2019 at 15:30
    Permalink

    DROPDOWN NOT DISPLAYING SOLVED!

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

  • September 13, 2019 at 15:30
    Permalink

    @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

  • September 13, 2019 at 15:30
    Permalink

    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>

  • September 13, 2019 at 15:30
    Permalink

    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

  • September 13, 2019 at 15:30
    Permalink

    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

  • September 13, 2019 at 15:30
    Permalink

    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!

Leave a Reply