• Tuesday , 31 March 2020

Bootstrap 4 Tutorial #11 – Responsive Navbars

Code Canyon
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

3d Ocean

Related Posts

28 Comments

  1. Camilo LM
    November 1, 2019 at 16:21

    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. sx sx
    November 1, 2019 at 16:21

    How do we create sidebar menu

  3. SHAH-JAHAN Lancan Int.
    November 1, 2019 at 16:21

    *****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**

  4. uzdarbis namuose
    November 1, 2019 at 16:21

    Itms do not show too only when click on mobile menu

  5. uzdarbis namuose
    November 1, 2019 at 16:21

    Not workking

  6. Ismahene Larbi
    November 1, 2019 at 16:21

    Just pointing out that the toggleable code didnt work for me, neither did the expand one

  7. nizar kadri
    November 1, 2019 at 16:21

    this nav is not working !! i tried every possible way

  8. OMAR ACADEMY
    November 1, 2019 at 16:21

    What is this theme name

  9. N J
    November 1, 2019 at 16:21

    thank you so much

  10. Dj DK
    November 1, 2019 at 16:21

    Why don't you use ul and li tags for navbar items?

  11. TRIBAL FROM THE TRAP DON TRAPPICUS
    November 1, 2019 at 16:21

    I like this!

  12. Dragonthunder
    November 1, 2019 at 16:21

    navbar-inverse wasn't working for me, however navbar-dark did the trick.

  13. iKyle
    November 1, 2019 at 16:21

    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

  14. Gemma Bou
    November 1, 2019 at 16:21

    To work correctly without changeing "navbar-expand-sm" to "navbar-toggleable-sm", you have to download the Bootstrap CSS and JS of https://v4-alpha.getbootstrap.com/getting-started/download/ and putting this two zip folders in your web directory with your index. Then copy in your code where it said bootstrap CSS, the lines of Bootstrap CDN that appear later on this same link.

  15. Daniel Gutierrez
    November 1, 2019 at 16:21

    Hey guys, if you want some of your content on the right side of the navbar make a new ul class with ml-auto . so: <ul class="navbar-nav ml-auto">

  16. Stud Stud
    November 1, 2019 at 16:21

    How will i do if i had to add login and new user of the right side with glyphicons on the navbar which you have shown.

  17. Hassan Mir
    November 1, 2019 at 16:21

    Thank You so much , very clear .

  18. pran ballab das
    November 1, 2019 at 16:21

    "Home, link, disabled" i want to put right side in my Navbar. pls help me.

  19. Cookie Cutter
    November 1, 2019 at 16:21

    Doesn't work

  20. TechBusker
    November 1, 2019 at 16:21

    great videos, can you help me? i want to set my navbar into transparent and make in color on scroll when you scroll down 500px. i cant seem to make it work.

  21. Kenneth Chua
    November 1, 2019 at 16:21

    Thanks, please make more videos like this bro

  22. Leo Guzman
    November 1, 2019 at 16:21

    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">

  23. Maccer Dietz
    November 1, 2019 at 16:21

    Nice tutorial again! However, the links in the navbar don't receive the active class once they're clicked. How come? I copied exactly your code but with no succes. Any idea?

  24. Alex Seong
    November 1, 2019 at 16:21

    I copied the code word for word but the items are not showing up… any ideas why?

  25. Alex Seong
    November 1, 2019 at 16:21

    I copied the code word for word but the items are not showing up… any ideas why?

  26. Islam Ibakaev
    November 1, 2019 at 16:21

    what's font-face for atom?

  27. Sandy Div
    November 1, 2019 at 16:21

    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?

  28. Bobby Smith Jr
    November 1, 2019 at 16:21

    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 Comment

You must be logged in to post a comment.