D4mations.com

Bootstrap Tutorial for Beginners – 6 – Navbar

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

d4mer

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

38 responses to “Bootstrap Tutorial for Beginners – 6 – Navbar”

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

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

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

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

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

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

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

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

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

Leave a Reply