Bootstrap Tutorial for Beginners – 7 – Dropdown Menu

[ad_1]
Facebook –
GitHub –
Google+ –
LinkedIn –
reddit –
Support –
thenewboston –
Twitter –


Posted

in

by

Tags:

Comments

21 responses to “Bootstrap Tutorial for Beginners – 7 – Dropdown Menu”

  1. Prasoon Pandey Avatar

    this dropdown is not working ,please check the ,is there any problem

    <html>
    <head>
    <meta charset="UTF-8">
    <title>bootstrap</title>
    <!– Latest compiled and minified CSS –>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;

    <!– Optional theme –>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"&gt;

    <!– Latest compiled and minified JavaScript –>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script&gt;
    </head>
    <body>
    <!–Logo–>
    <nav class="navbar navbar-inverse">
    <div class="container-fluid">
    <div class="navbar-header">
    <a href="#" class="navbar-brand"><h2>INDEPENDENT INDIA</h2></a>
    </div>
    <br
    <!–Menu–>
    <div>
    <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contacts</a></li>

    <!–Dropdown–>
    <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> India <span class="caret"></span></a>
    <ul class="dropdown-menu">
    <li><a href="#">Images</a></li>
    <li><a href="#">Stories</a></li>
    <li><a href="#">Places</a></li>
    </ul>
    </li>
    </ul>
    </div>
    </div>
    </nav>
    </body>
    </html>

  2. Milan panaich22 Avatar

    i coded "#" as http in dropdown tutorial and clicked on' my profile ' in explorer then it showed me the explorer page again,where result comes after coding in atom instead of properties of my profile

  3. mohit saraswat Avatar

    Your tutorials are very good but very hard to focus .But now nothing could be done about it.

  4. Patrick Santillan Avatar

    Hi. how can I change the color of the navbar to other colors.

  5. Sameer Mohamed Avatar

    same issue i faced and found a solution, change links order as follows, it works for me.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  6. Ardu Sace Avatar

    my dropdown is still ain't working. can you solve my problem? i have read the comment and copy and pasting, still doesn't work. can you help me?

  7. Code Sergeon Avatar

    dear bucky the interface of this bootstrap tutorial series is so boring . make it attractive, that should attract the watcher/user/learners… i think notepad++ is good thn……!

  8. Buffryni Avatar

    I have done Everything! EVERYTHING!!! mentioned in the comment section but still i failed please someone reply me with complete code. PLEASE PLEASE

  9. Allan Fernz Avatar

    Could someone tell me the name of the code editor?

  10. Nein Danke Avatar

    are the corners of the nav-bar rounded by default?

  11. Nein Danke Avatar

    at 4:28 lol nothing changed xD

  12. Martin Macko Avatar

    How to make another dropdown menu in the existing dropdown menu?

  13. Imroz Wana Avatar

    adding jquery solved my problem,but auto margin is added from top of my nav bar..

  14. Charbel Sarkis Avatar

    hi i added the new jquery still doesn't work? but it works when i go to the bootstrap website the example there woks just fine also tried it in opera doesn't work as well i'm using google chrome.

  15. Hubert Leo Avatar

    For those with navbar problems, you can diagnose the problems yourself. Go to: http://getbootstrap.com/examples/theme/
    and click inspect element, there you can see the code for navbar and just copy and paste the code

  16. THE SCONIX Avatar

    how to change the font size on the menu ???

  17. Icarus Avatar

    Guys, when I include jQuery, a line break gets inserted above the navbar! What trickery is this?

  18. Eric Thakvika Avatar

    dear everyone, I also not work on dropdown manu but when I check is because I call js from the wrong folder,please check your js folder and try it again

  19. Ethan Hemo Avatar

    To those that the dropdown isn't working, try to put the 'class="dropdown-toggle" data-toggle="dropdown" '
    at the <a> tag instead of the <li> tag. the <li> should have the class="dropdown" though.

  20. Malick Cisse Avatar

    Hi,
    I have 2 questions I would like answered please
    1.My page is displaying correctly on Chrome and firefox but I can't find a way for it to display correctly on Internet Explorer or Edge. Is there a fix for this?
    2– My understanding was inserting this two codes just before the closing body tag should work fine, I learn it on Microsoft Dev tutorial and it worked fine. I can't get it to display the dropdown menu. Below are the two codes;
    <script src="./scripts/jquery-3.1.0.min.js"></script>
    <script src="./scripts/bootstrap.min.js"></script> (where scripts is my folder name)
    Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *