HomeНаука и техникаRelated VideosMore From: Academind

Bootstrap 4 Navbar Concepts | BOOTSTRAP 4 TUTORIAL

953 ratings | 53157 views
The responsive navbar is one of the most important components Bootstrap 4 offers. With the Bootstrap 4 navbar help, you can easily add an automatically-collapsing (configured by you though) navbar to connect the different pages of your website. Learn more about the navbar core concepts in this Bootstrap 4 tutorial. ---------- Source Code for the Video: https://github.com/academind/bootstrap4-introduction/tree/03-navbar Watch the Series on academind.com: https://www.academind.com/learn/css/bootstrap-4-tutorial/responsive-navbar Official Navbar Docs: http://getbootstrap.com/docs/4.0/components/navbar/ ---------- • You can follow Max on Twitter (@maxedapps). • And you should of course also follow @academind_real. • You can also find us on Facebook.(https://www.facebook.com/academindchannel/) • Or visit our Website (https://www.academind.com) and subscribe to our newsletter! See you in the videos! ---------- Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!
Html code for embedding videos on your blog
Text Comments (166)
Ali Agha (17 hours ago)
This was absolutely fantastic sir! I cannot thank you enough.. You have made navbar look so simple! Thank you so much for sharing your knowledge with us! GOD Bless you :)
Academind (4 hours ago)
That's just awesome to read Ali, thank you very much for your wonderful feedback!
hidrofire (10 days ago)
Aijaz Shaikh (14 days ago)
Greate sir g!!!! MAA SHAA ALLAH
Rakshita Paliwal (15 days ago)
I always scared of bootstrap navbar , but after watching this video. I'm damm confident. Thank you Sir !
Academind (15 days ago)
Great to read that Rakshita, thank you!
uzdarbis namuose (1 month ago)
Working but not good working and the navbar toggler icon will go from right to left. Bootstrap 4 is not working for that.
Se Moo (1 month ago)
very helpful man &thx alooot
Academind (1 month ago)
Thank YOU for your comment!
Great video. Really helpful :)
Myles Gmail (1 month ago)
Thx so much
Barry Manilowa (1 month ago)
Bootstrap is a huge mess. It's too bad SemanticUI never caught on. It had a very intuitive and consistent way of applying classes and didn't require infinite wrapping of divs.
Alex Mattheis (1 month ago)
You have one more subscriber! Thanks for your great explanations. The tutorial is great to start into Bootstrap.
Academind (1 month ago)
Thanks a lot for your support and for your awesome feedback, happy to have you on board of the channel!
Todd Robertson (1 month ago)
Could you have made this anymore confusing in your approach.
thanks a lot for this tutorial, i have a question about if i want to put the logo image in the middle of the menu how can i do it . thanks for all
Myles Gmail (1 month ago)
Christian Tbfh (2 months ago)
Shouldn't there be a header before the whole navbar thing?
Ananda Kumar (2 months ago)
Loved the simple explanations... This is how every programming explanations should look like...
Academind (2 months ago)
Thanks so much Ananda, happy to read that you liked my explanation!
ultium labs (2 months ago)
You know what you're doing. explaining every class really really need depth understanding. many videos don't explain as detail as this. Thanks Max.
Academind (2 months ago)
Thanks a lot, happy to read that my explanation was helpful!
Blix11 (2 months ago)
Great video! I had problems with my hamburger menu due to the missing js libraries.
ID setters (2 months ago)
excelente seu vídeo, da uma passada no nosso canal no youtube. Beijos
Academind (2 months ago)
Thank you :)
Eunar Dayangco (2 months ago)
I wanna ask because navbar has a default white background. How do I make It transparent?
Daniel Pedersen (2 months ago)
Hello. Very good video, however, i've had some trouble adding "transition" to my navbar. I am trying to change a bit to the navbar so that instead of clicking, the drop-down menu in navbar will automaticly come forth, but smoothly using the transition in CSS... is this possble? Had trouble adding it. Hope you can help.
rundown thomas (2 months ago)
this guy is great, he has such an in depth understanding that he doesnt have a problem breaking things down clearly...that in itself shows knowledge....other guys dont really get everything and just blag their way through.
Academind (2 months ago)
Thanks so much Thomas, it really means a lot to me to get such an incredible feedback!
Jonas Wrede (2 months ago)
Amazing video !!
Hammad Ali (3 months ago)
great work. love from #pakistan
Jonathan Mejias (3 months ago)
How can I add custom color to the navbar background?
Mohammed Shamsul Islam (3 months ago)
Simple & easy teaching, Many many thanks
Mohammed Shamsul Islam (3 months ago)
I am very happy to listen lesson,Thank you Sir.
Academind (3 months ago)
Thanks a lot Mohammed, happy to read that you like it!
Decebal Petre (3 months ago)
Very nice :)
nizar kadri (3 months ago)
thanks u soo much !! explained bery clearly !!! I had already seen many other videos for navbar but understood clearly by urs !!!
Academind (3 months ago)
Thank YOU for your great feedback Nizar, happy to read that the video made things clearer for you!
Rodrigo Henrique (4 months ago)
with the bootstrap many versions i was so lost thinking "why my code doesnt work ? " and i found an north with your video, thanks A LOT Greetins from Brasil \o/
Academind (4 months ago)
Just awesome to read that the video was helpful for you Rodrigo, greetings from Germany :)
Afaf Benrabia (4 months ago)
wonderfully explained, thank you, it would be amazing if you could do a full tutorial
Academind (4 months ago)
Thank you Afaf! This video is actually part of a full series: https://academind.com/learn/css/bootstrap-4-tutorial/
redbug (4 months ago)
you give out so much positive energy 🙌❤
Academind (4 months ago)
It really makes me happy to read that, thank you so much :)
Nerika Cutie 2 (4 months ago)
thanks you helped me through the course that i am doing.
Academind (4 months ago)
Great to read that the video was helpful for you, thank you sharing this :)
aditya jethi (4 months ago)
best bootstrap tutorial ever... Thanyou sir..
Academind (4 months ago)
Wow, so awesome to read that Aditya, thanks a million for this wonderful feedback :)
Angel Ruiz (4 months ago)
I like how you explain stuffs. please do more :)
Academind (4 months ago)
Thanks so much for your great feedback, I'll try my best to keep it going :)
H0tKinsS (4 months ago)
What's the program you're using ?
Academind (4 months ago)
I use Visual Studio Code with these extensions: https://www.youtube.com/watch?v=VqCgcpAypFQ&t=1091s
rundown thomas (4 months ago)
whats wrong with jquery
Kamrul Hasan (5 months ago)
I am expecting a video from someone like you that shows how to create multilevel drop down menu using bootstrap. Could you please do that for us? It is really strange to limit a dropdown menu to just one level only - the only lacking I see with bootstrap.
Morris R. (5 months ago)
How to customize the navbar to a skinny one? and make it not to overlap the content bellow?
afiq afdzal (5 months ago)
How do we trigger the event when clicked by each from navigation for example to pop up the image on the right?thanks
ROULLIER Bruno (5 months ago)
Very good video. How to have a menu that closes by clicking next to the menu instead of clicking on the menu icon.
Saiphes (5 months ago)
This is wonderful. I used it to get some quick study for the middle of the Udemy python/django course. I'll pay for one of your udemy courses next! I especially appreciate your style of teaching, leading us to add things for good reasons, experience the problem, and add the next thing.
Academind (5 months ago)
I'm very happy to welcome you on board of the courses - thank you so much for your absolutely amazing feedback! :)
arfa son (5 months ago)
thanks you so much bro i am new learner of bootsrap
Academind (5 months ago)
Thank YOU for your comment Arfa, I hope this video makes learning Bootstrap a bit easier for you :)
3rdpoly (6 months ago)
Awesome! just what I was looking for.. enjoyed the thorough explanation of what each class member did - have a much better understanding of it now - thank you!
Academind (6 months ago)
It honestly means a lot to me to get such a wonderful feedback. Thanks a lot for that!
Anusuya S (6 months ago)
How to add sub navigation what is the class name
Anusuya S (6 months ago)
Nice navbar I need sub nav too
Tyllar TV (6 months ago)
I spent a long time reading the official documentation on navbars and just couldn't wrap my head around what each class and section was doing in their given example. Love your style of teaching man it all makes sense now, you break everything down bit by bit and at the perfect pace. Keep up the great work!
Academind (6 months ago)
So cool to read that, it honestly means a lot to me to read that you like my teaching style. Thank you for your awesome feedback, I'll try my best to keep it up :)
Ams1 Ams (6 months ago)
I bet 100 dollar he is from germany
Ams1 Ams (6 months ago)
Academind ich wusste es!
Academind (6 months ago)
I think you would win this bet ;)
Avatarland (7 months ago)
How to make a transparent navbar?
Belmiris (7 months ago)
Thank you for this!
Academind (7 months ago)
Thank YOU for your great feedback!
Amathos (7 months ago)
Hi, man! In which editor do you write the code?
Amathos (7 months ago)
Academind thx)
Academind (7 months ago)
I use Visual Studio Code :)
Màrtiņš Dudeks (7 months ago)
Hi , how i can center navbar-nav ?
Fake Drummer (7 months ago)
We can land a probe on Mars, but we can't stop a video and start it back 2 minutes later.
Daniel Khadivi (7 months ago)
A great tutorial. Thank you for taking the time and sharing your knowledge.
Academind (7 months ago)
Thank YOU for sharing this fantastic feedback Daniel :)
Apro Dan (7 months ago)
Awesome tutorial!
Academind (7 months ago)
Thank you, so great to read that!
Luis Villegas (7 months ago)
I really liked the way you explained what each tag do. Thanks a lot :D
Academind (7 months ago)
That's really great to read Luis, thank you very much for your comment!
T4nv1r S1dd1k1 (7 months ago)
many thanks
Academind (7 months ago)
That's really amazing to hear - I'm glad you're finding all these resources helpful!
T4nv1r S1dd1k1 (7 months ago)
i take your "css" course on udemy and i just finished the course...now i'm learning bootstrap ...and your teaching skill just awesome....
Academind (7 months ago)
Thank YOU for your comment!
Almas (7 months ago)
Hey do you know why do I get this viewpoint after i click Toggle Button http://prntscr.com/jn8j2u ?
mikebutak (7 months ago)
As always, such extremely helpful content from Max. Question: Why at 10:15 seconds does Max suggest importing the CDN links at the end of the body whereas the css bootstrap links he imported just before the title?
Kumail Khan (8 months ago)
Hey Max. i want to tell you something that you are the best. Because i have purchased few courses and i was not able to understand the detail about the NAV. The way you have explained its just wow. I wish i can find your complete course on Bootstrap if i do i believe i will be Master on Bootstrap. By the way i have already enrolled my self on your CSS - The Complete Guide (incl. Flexbox, Grid & Sass) course. I hope i will find it the same quality and will learn the best. Thank You so so much.
Kumail Khan (8 months ago)
Academind You are always welcome. Yes i can understand that but if you would have created such bootstrap course i would have been definitely enrolled my self into it. Yes i believe that i will be learning alot in that CSS course. I do have a bit knowledge but i want to gain more. Thank you for teaching us Max. Really appreciated.
Academind (8 months ago)
Thank you very much for your awesome feedback and for your support Kumail, this really means a lot to me me! I do not plan to create a Bootstrap course at the moment to be honest (that might change in the future though). Great to read that you joined the CSS course, I really hope that you will like it :)
Alem Kahrovic (8 months ago)
Best B4 navbar tutorial.. but how can i Change the color on nav i want?
Mr Speaker D (8 months ago)
try adding your own custom class to your nav so for example: <nav class="navbar navbar-expand-sm customnavclass"> Then in your styles section add the class and make it have the property background-color: yourcolor. So that would look like: .customnavclass { background-color: red; }
Noah A (8 months ago)
And… this doesn't seem insane to anyone?
Vladimir Ll. Aguilar (8 months ago)
Hi, thanks for the tutorial, I like how to explain step by step. Just one question. When i have a hamburger button how i manage to make it close after I click an option having inside also a dropdown menu?, I'm asking because i manage to sort it out to close when i do a click on a link, but if the menu have a dropdown list, its close before showing the options. Thanks for your time if you can help me. Cheers
Franky Padilla (8 months ago)
i got diiffent result. the text 'user' wrapped around the a tags is centered on my navbar instead of to the right?
Franky Padilla (8 months ago)
<nav class="navbar navbar-light bg-light"> <a href="navbar-brand">Franky</a> <ul class="navbar-nav"> <li class="nav-item"><a href="#" class="nav-link">User</li>
Manjunath Karbhasgi (9 months ago)
plz can you show us how to change background-color and color for bootstrap navbar.. i tried changing but i struck with the toggle icon..
ElVitolacho (9 months ago)
I've been struggling a lot with Bootstrap 4, specially with the Navbar, and you sir, have given me the knowledge. I really appreciate how you went by each class basically and and showed how each one of them worked. I insta-subscribed. Great work and thank you!
Academind (9 months ago)
Thank you so much for your awesome feedback, really great to have you on board of the channel :)
Dan Ber (9 months ago)
That was exactly what I was looking for!! Why can't docs be so clear in describing their stuff :D Thanks man! Greetings from a fellow German living in Australia!!
Academind (9 months ago)
Really happy to read that you like my explanation Dan, greetings from Germany :)
Dan Kelly (9 months ago)
9:55 LOL! That's awesome! "Yeah. Bootstrap still uses jQuery." :-D
Hazem Omar (9 months ago)
super amazing !!!!!
Academind (9 months ago)
Thank you so much Hazem!
Downthehollow (9 months ago)
This was a fantastic tutorial. I've gone through others and while they were out of date, they didn't go into so much detail. I love the way you explained the thought process as you went.
Academind (9 months ago)
What more can I say but thank you very very much for your wonderful feedback. This honestly means a lot to me :)
arbab Hussain (9 months ago)
how to position nav items at center
Sergi (9 months ago)
On the "navbar-nav" ul you can use m-auto instead of mr-auto or ml-auto.
Great vídeo, please vídeo integration vue + bootstrap 4 with no jquery
cyrep (10 months ago)
don't add scripts to the end of the body. place them in head and use the "defer" attr instead: https://www.w3schools.com/tags/att_script_defer.asp
cyrep (9 months ago)
https://fontawesome.com/get-started https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API ... not everywhere. defer is out there https://stackoverflow.com/questions/436411/where-should-i-put-script-tags-in-html-markup
Sergi (9 months ago)
The "old" way? jesus, it's still being taught that way everywhere.
Academind (10 months ago)
Thanks! As I wrote, I agree that it's an "interesting" option and definitely something we should consider - especially for the future. I don't see enough of a disadvantage of the old way to abandon it though. Especially for simply projects like this one.
cyrep (10 months ago)
Well the disadvantages are that your scripts are only loaded after the enitre DOM has finished parsing, which will lead to longer loading-times on bigger sites. And according to https://getbootstrap.com/docs/4.0/getting-started/browsers-devices/ you should use bootstrap3 if you need IE8-9 support. So it seems a little overcautious to load scripts "the old way" in a bootstrap4 tutorial since defer is fully supported in IE^10 (https://caniuse.com/#feat=script-defer). just my thoughts on the subject. anyway... nice tutorials & udemy courses, keep up the good work!
Academind (10 months ago)
defer is an option but it's wrong that this would be stricly better. Browser support for defer has improved, so you probably get away with that but placing the script at the bottom has very little disadvantages and will work in older browsers, too. Still worth knowing about defer, I do agree about that
Isidro Martínez (10 months ago)
how can i add a image instead ""Academind"? thanks
Adnan Halilovic (9 months ago)
Add this instead of "Academind" <img src="your-image.jpg" alt="Your Image Description">
Fer490G (10 months ago)
best explanation of bootstrap
Academind (10 months ago)
Makes me really happy to that, thanks a lot!
Muhammad Adnan (10 months ago)
One issue left. .. would you tell me when we resize browser in media screen then dropdown menu should show on click .... for big screen it's perfect to show hover. ????
Muhammad Adnan (9 months ago)
visited stackoverflow but there isnt get any ans related to my topic and all
Muhammad Adnan (9 months ago)
the solution i have made myself just activate both click and hover click for media screen and hover for desktop screen by make css hover for desktop and click function with jquery for mobile hhhhh how is it ? ,,,,,,
Sergi (9 months ago)
That does not have an easy fix and I'm sure you can find the answer on Stackoverflow, I know I was asked to do that in the past (with Bootstrap 3) and it wasn't really that easy to achieve. It is an issue because many people will ask to just do a hover instead of having to click not knowing that well, that's how Bootstrap works.
Muhammad Adnan (9 months ago)
thanks but its not my solution anyway ok ..... problem is i have set hover to show dropdown menu only for big screen lke desktop or mobile screen it should be click function to show dropdown menu
Adnan Halilovic (9 months ago)
Dropdown on hover solution: add this at the end of your index file before closing the body tag: <script type="text/javascript"> $('body').on('mouseenter mouseleave','.dropdown',function(e){ var _d=$(e.target).closest('.dropdown');_d.addClass('show'); setTimeout(function(){ _d[_d.is(':hover')?'addClass':'removeClass']('show'); },300); }); </script> And this to your css: .dropdown:hover>.dropdown-menu { display: block; } That should do the trick. :)
CBorgZ (10 months ago)
*Just another "concepts".. but LIKE* ;)
Academind (10 months ago)
The CodingHub (10 months ago)
thanks sir
Academind (10 months ago)
Thank you for your comment!
Gerald Sneijd (10 months ago)
Great Tut, thank you Max! Why aren't you happy with jquery?
Academind (10 months ago)
For the tiny things, vanilla JS can pretty much do everything you need these days and for bigger web apps/projects, you quickly end up in a (state management) mess with jquery. That's why I avoid it ;)
Barjosa31 Blogspot (10 months ago)
Once again! Thank you, Max!
Academind (10 months ago)
Thank YOU again for your support!
Marcos de Souza (10 months ago)
Great video as aways. Are you using what software? I rly like those auto complete code feature.
Adnan Halilovic (9 months ago)
Pradip Khadka (10 months ago)
Marcos de Souza VSCode comes with Emmet which provides different snippets. Search for emmet on Google to know more about it.
Julia Utenkova (10 months ago)
"Yeah, bootstrap still uses jquery" face - priceless :D
ken (10 months ago)
I bought your React course and React native course. Also, I have watched your Laravel course on Youtube. I really hope you will make a React spa course with Laravel API !!
Kuat Abylkasymov (10 months ago)
Also, you are great :D
Academind (10 months ago)
Thank you Kuat :)
Kuat Abylkasymov (10 months ago)
Hi, I think you should use the 'nav' class in 'ul' instead of 'navbar' for 'li' elements to be displayed horizontally
Saidur Rahman (10 months ago)
I don't think there is another video on youtube, that covers Bootstrap 4 navbar by breaking the classes piece by piece like you did!! Simply brilliant, and probably the most transparent demonstration!! I follow you here, as well as have subscribed to your multiple courses on udemy. You keep up the super work you are doing!!
Academind (10 months ago)
Thank you very very much Saidur, it really means a lot to me to receive such an amazing feedback! I really try my best to explain the concepts step by step, so I'm very happy to read that you like it :)
Rushabh Patel (10 months ago)
Wonderfully explained. Loved how you stopped after adding each class to show us what effect it has. Many tutors just add a bunch of bootstrap classes and just show the end effect of all of that.
crptc (1 month ago)
Totally agree, I've watched 5+ other videos and all of them just throw in classes without really explaining what is what...
Academind (10 months ago)
It really means a lot to me to read that you like my teaching style Rushabh, thank you very much for your comment!
Alessandro de Manzano (10 months ago)
Wow Max ! you are always the best ! just what I was looking for ! thanks!
Academind (10 months ago)
That's so cool to read Alessandro, thank you very much for your comment!
Kamran Ali (10 months ago)
Thank you so much Max. Have already started applying these learning here http://bootstrap-blog.kamranali.in/
super. thanks handsome..
Academind (10 months ago)
Thank you Ummer!
Vishal sundararajan (10 months ago)
do you really think that bootstrap a very good choice for reactjs or angular because for angular we have things like angular material but reactjs there is no other thing worth like it. so i would like to use bootstrap with reactjs
Academind (10 months ago)
It comes down to which kind of style you want AND if you want a complete component library like Angular Material or a library like Bootstrap where you have the choice between style-only components and JS-based components.
Kiddi (10 months ago)
How to create this nav stick to bottom?
christooss (10 months ago)
You can add "navbar-fixed-bottom" class to <nav> tag.
Vaibhav Mittal (10 months ago)
I watch other channels. No one explain all things with this much ease and details, you are great Max
Academind (10 months ago)
YOU are great Vaibhav, thanks so much for your fantastic feedback :)
Rahul Vanmali (10 months ago)
Sir your thoughts on materialize css! MD-bootstrap?
Academind (10 months ago)
Haven't worked a lot with it - it was very buggy the last time I had a look at it to be honest
Mettek (10 months ago)
It is rare to leave comments on youtube for me, but in this case i give congratulations for these excellent videos!
Academind (10 months ago)
Thank you very very much, really happy to read that you like the videos!
Hamza Javed (10 months ago)
You Are Amazing Person!!!!
Academind (10 months ago)
YOU are amazing Hamza, thank you so much for your comment :)

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.