• Tuesday , 20 November 2018

Bootstrap Tutorial for Beginners – 6 – Navbar

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



Facebook – https://www.facebook.com/TheNewBoston-464114846956315/
GitHub – https://github.com/buckyroberts
Google+ – https://plus.google.com/+BuckyRoberts
LinkedIn – https://www.linkedin.com/in/buckyroberts
reddit – https://www.reddit.com/r/thenewboston/
Support – https://www.patreon.com/thenewboston
thenewboston – https://thenewboston.com/
Twitter – https://twitter.com/bucky_roberts

Original source

3d Ocean

Related Posts

38 Comments

  1. Celiber
    September 13, 2018 at 11:03

    🙂

  2. Hamza Rana
    September 13, 2018 at 11:03

    People having issues with Bucky's old tutorial, here's the code for Bootstrap 4:

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <div class="container-fluid">

    <!–Logo Here –>
    <div class="navbar-header">
    <a href="#" class="navbar-brand">Hello!</a>
    </div>

    <!–Menu Items –>
    <div>
    <ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="#">About</a></li>
    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
    </ul>
    </div>

    </div>
    </nav>

  3. abhi abhi
    September 13, 2018 at 11:03

    <!DOCTYPE html>
    <html>
    <head>
    <title>
    Navigation
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <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.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

    <style>

    </style>
    </head>

    <body>
    <nav class="navbar navbar-default">
    <div class="container-fluid">

    <div class="navbar-header">
    <a href="#" class="navbar-brand">Brand</a>
    </div>

    <div>
    <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li ><a href="#">About</a></li>
    <li ><a href="#">Courses</a></li>
    </ul>
    </div>
    </div>

    </nav>

    </body>
    </html>

    is this correct?

    I'm getting a wrong output though.

    Please help me.

  4. Steve Patco
    September 13, 2018 at 11:03

    what about logo image?

  5. Hari Dulal
    September 13, 2018 at 11:03

    bootstrapV4.0 has messed up everything..use earlier versions for results similar to the video..

  6. pofrani
    September 13, 2018 at 11:03

    Hi Bucky – I came across your videos last night and it's a nice tutorial! So I have subscribed! Can you tell me what editor you're using? At first I thought it was Sublime but I don't think it is… (I'm currently using Brackets but now trying Sublime)
    Can you tell me pls?

  7. Punit pandey
    September 13, 2018 at 11:03

    all videos are awesome ……pls, add the video about the SEO and how to add https and how to be in google. step by step guide to how to buy http,robots.txt,sitemap and other

  8. retsam eltrut
    September 13, 2018 at 11:03

    if your output is not from left to right but from top to bottom with bullets, check your unordered list closing tags </ul> , my editor automatically added it without me noticing and had that output before figuring out.

  9. Farhan khan
    September 13, 2018 at 11:03

    boostrap js is not working

  10. Jose Alfredo
    September 13, 2018 at 11:03

    I dont have some classes on my bootstrap.min like navbar-default and navbar-header. What should I do?

  11. eLLiot mLEB
    September 13, 2018 at 11:03

    Instead of a text brand , how would one use a image, in the nav for a logo?

  12. good boi
    September 13, 2018 at 11:03

    HELP!
    How to get into freelancing?
    Should I learn everything before doing the actual work?
    Or should I learn along the way??

  13. Ahmad abdulkarim
    September 13, 2018 at 11:03

    sir all your tutorials the screen are very clear, but bootstrap tutorials screen are not

  14. Kevin DeLaune
    September 13, 2018 at 11:03

    Finally! Someone actually breaks down the Bootstrap Navbar, rather than Copying and Pasting the code, and then trying to explain it. Your method is 100x more effective in pushing the knowledge into our brains.

  15. Mike Shainski
    September 13, 2018 at 11:03

    Dude, this was INVALUABLE! Thank you from the bottom of this noob's heart. I learned it all only recently, and remembering it all is a bitch. Your instructions are to the point and so easy to follow, I now have it all down

  16. Chrisell Bencalo
    September 13, 2018 at 11:03

    Hi. Can you please help me? I did everything on your tutorial, but the output on mine is not the same as yours, what I only have is words like this.

    .Home
    .About
    .Gallery

    Help me please. Thanks 🙂

  17. Asif Adam
    September 13, 2018 at 11:03

    would have been nice if you showed how to style this navbar in css.. good video never the less 👍

  18. James Siva
    September 13, 2018 at 11:03

    awesome

  19. Iftikhar Ali Mushtaq
    September 13, 2018 at 11:03

    Helpful 🙂 Thanks

  20. Md. Ohiduzzaman
    September 13, 2018 at 11:03

    nice

  21. Chen Roche
    September 13, 2018 at 11:03

    Do Like your tutos!!! Very useful !!! THX

  22. Robson Sousa
    September 13, 2018 at 11:03

    Pretty good! These tutorials are helping me alot! Thank you!

  23. Richard Zeng
    September 13, 2018 at 11:03

    This helped a lot but I have a question:
    your nav is border by a grey rectangle and the active list is even darker. On mine, I don't see this. Is this because bootstrap might have change the settings or is this something I did? Thanks a lot

  24. True Mexico
    September 13, 2018 at 11:03

    This is useful and helped. But in the real world what company/site uses a bolded text as their logo in the nav bar?! It's their REAL logo, an image. It would be great how you explained how to make a bootstrap logo for the real world…. logo on left side, menu items on right side. When brower smaller it changes via responsive rules, eg nav optios now directly below your company logo.

  25. Abhishek Choudhary Khatkar
    September 13, 2018 at 11:03

    What about if i want to show the menu on the user is active?
    It only show Home button active. If user goes to about menu then also Home button is shown active. How to correct this?

  26. Kd_M
    September 13, 2018 at 11:03

    It didn't come up like yours:

    <nav class="navbar navbar-default">
    <div class="container-fluid">

    <div class="navbar-header">
    <a href="navbar-brand">KDM MUSIC</a>
    </div>

    <div>
    <ul class="navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Beats</a></li>
    <li><a href="#">Tutorials</a></li>
    </ul>
    </div>

    </div>
    </nav>

  27. Kd_M
    September 13, 2018 at 11:03

    Do I need to install jquery?

  28. Kd_M
    September 13, 2018 at 11:03

    thenewboston part was exactly like yours but the <ul></ul> was the messed up part. I don't know why but when I opened in chrome the list was going down the left side of the page instead of across the top like you showed. HELP.

  29. MUN WebTeam
    September 13, 2018 at 11:03

    How will I make the logo display an image that links to the homepage and not just the text.

  30. cvetidesign
    September 13, 2018 at 11:03

    I have a problem with this styling because my "buttons" are fit of all of the page. So my menu look like on the first line Home, below this: About and below this: Contact. The main reason is they are not float left. How to fix it.

  31. Kim Jong-un
    September 13, 2018 at 11:03

    dont understand a fuck of it XD

  32. saby8765
    September 13, 2018 at 11:03

    Fantastic tutorial

  33. Paul Padua
    September 13, 2018 at 11:03

    Can somebody tell me how to change the height of the navbar? And how you would go about putting an image instead of text within the area for the logo/navbar-header?

  34. Anthony Parziale
    September 13, 2018 at 11:03

    For some reason when I add lets say 2 more <li>'s to the navbar, it stacks them 3 on top of two. Anyone know why this is happening?

  35. Rishi Gujadhur
    September 13, 2018 at 11:03

    I shall never forget this now  

     <nav class="navbar navbar-default">
            <div class="container-fluid">
                
                <!– Logo –>
                <div class="navbar-header">
                    <a href="#" class="navbar-brand">THENEWBOSTON</a>
                </div>

            </div>
        </nav>

  36. RazTutu
    September 13, 2018 at 11:03

    so hard to remember <ul class="nav navbar-nav"> </ul> :'(

  37. Guilherme Borges Lima
    September 13, 2018 at 11:03

    The problem about this "active" class is that you must create a menu for every page of your site. You cannot just include the menu code, because "active" will be different. How could you automatically set this "active" class?

  38. Bibesh Manandhar
    September 13, 2018 at 11:03

    Dropdown ??

Leave A Comment

You must be logged in to post a comment.