[ad_1]
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”
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>
How do we create sidebar menu
*****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**
Itms do not show too only when click on mobile menu
Not workking
Just pointing out that the toggleable code didnt work for me, neither did the expand one
this nav is not working !! i tried every possible way
What is this theme name
thank you so much
Why don't you use ul and li tags for navbar items?
I like this!
navbar-inverse wasn't working for me, however navbar-dark did the trick.
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
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.
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">
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.
Thank You so much , very clear .
"Home, link, disabled" i want to put right side in my Navbar. pls help me.
Doesn't work
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.
Thanks, please make more videos like this bro
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">
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?
I copied the code word for word but the items are not showing up… any ideas why?
I copied the code word for word but the items are not showing up… any ideas why?
what's font-face for atom?
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?
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