Bootstrap 4 Tutorial #11 – Responsive Navbars



https://i.ytimg.com/vi/g3iipbujyDg/hqdefault.jpg



—– COURSE LINKS:
+ Repo – https://github.com/iamshaunjp/bootstrap-4-playlist
+ Atom editor – https://atom.io/a
+ Download GIT – https://git-scm.com/
+ Bootstrap 4 Docs – https://v4-alpha.getbootstrap.com/getting-started/introduction/

Bootstrap 3 Playlist – https://www.youtube.com/playlist?list=PL4cUxeGkcC9g_69kOfXICzT_hZ79_td99

———————————————————————————————
You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress, Node.js & more on the channel homepage…

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

========== PSD to WordPress Playlist ==========

============ Node.js for Beginners Playlist =============

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

================== Social Links ==================

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

Original source


28 responses to “Bootstrap 4 Tutorial #11 – Responsive Navbars”

  1. This work for me

    <nav class="navbar navbar-expand-sm bg-info navbar-dark">
    <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarToggleExternalContent">
    <div class="navbar-nav">
    <a href="#" class="nav-item nav-link active">Home</a>
    <a href="#" class="nav-item nav-link">About</a>
    <a href="#" class="nav-item nav-link">Training</a>
    <a href="#" class="nav-item nav-link">Contact</a>
    </div>
    </div>
    </div>
    </nav>

  2. *****THIS IS TO BE NOTED THAT IT'S DEFINITELY A GREAT TUTORIAL – HOWEVER DUE TO THE FACT BOOTSTRAP VERSION HAS BEEN UPDATED TO (NOW 4.2.1) IT'S NOT WORKING, SO I HAVE COPIED THE OLD VERSION HEADING (4.0.0-alpha.6) AND PASTED AND FOUND IT'S WORKING….! I AM A NEWCOMER, I DO NOT REALLY KNOW HOW ETHICAL IT IS..! SO I THOUGHT THIS WOULD HELP SOME PEOPLE WHO ARE LEARNING LIKE ME…! ALSO I REQUEST SHAUN TO LOOK IN TO IT AND HELP US…THANK YOU**

  3. Wow! Your vid is amazing.. I've been into web development a week ago so i've been struggling understanding things on my own esp. the these navs.. You earned my subscribe button.. Thanks alot.. More tuts vids and Godbless

  4. Not sure why but the navbar code wasn't working for me either. I check the documentation and it stated that the code should be "navbar-expand-sm" instead of "navbar-toggleable-sm".

    I put this in as my navbar code and it works and looks good!

    <nav class="navbar navbar-expand-sm navbar-light bg-light">

  5. I can't seem to get my navbar to align on the right without it going missing or looking like a ul list. Once I used the class collapse it disappears. Need help! It worked fine before when I used bootstrap 3. Any reasons why?

  6. how would you write it if you wanted the last three <a> tags to be on the right side of your navbar.  class="navbar-nav navbar-toggler-right?  because when I put that it pulls it right but it shows it lower and not level to my navbar-brank

Leave a Reply