D4mations.com

Bootstrap tutorial 16 – Dropdowns

[ad_1]
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

d4mer

,
, , , , , , , , , , , , ,

31 responses to “Bootstrap tutorial 16 – Dropdowns”

  5. 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!

  8. 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.

  13. 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?

  15. @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. 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>

  27. 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