Bootstrap 4 Navbar Concepts | BOOTSTRAP 4 TUTORIAL
HTML-код
- Опубликовано: 7 фев 2025
- The responsive navbar is one of the most important components Bootstrap 4 offers. Learn more about it in this Bootstrap tutorial?
You prefer CSS? Join the full CSS course: acad.link/css
Check out all our other courses: academind.com/...
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: github.com/aca...
Watch the Series on academind.com: www.academind....
Official Navbar Docs: getbootstrap.co...
----------
• Go to www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Join our Facebook community on / academindchannel
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!
For anyone watching this after the Bootstrap 5 release, there are a couple of things you'll need to tweak if you plan on using Bootstrap 5. First, ml-auto and mr-auto won't work for pushing the menu items to the left or right. Use justify-content-start or justify-content-end instead. Also, at 9:15 when he adds the data-toggle and data-target, the syntax is a little different now. You'll want to use data-bs-toggle and data-bs-target. Cheers!
Thank you! I thought I made a typo or something.
You're a real one
thx a lot ! :)
Is this nav bar not work with simple html code..i am a beginner I want to create nav bar
thanks man you saved me from getting depression and existential crisis
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.
It really means a lot to me to read that you like my teaching style Rushabh, thank you very much for your comment!
Totally agree, I've watched 5+ other videos and all of them just throw in classes without really explaining what is what...
EXACTLY - The fact you broke down the classes after each use helps someone like me that is learning as I build my site. Way to go on thinking about that detail as you made your vid. Subbed and liked.
I totally agree... I came from a Pluralsight course where the instructor brought up many classes that I don't know yet to explain to me a class that he intended to teach lol I guess once one becomes experienced, he/she tends to forget what it was like learning something new for the first time. Excellent video Academind, it really helped a lot thanks
Maximilian is the best!
One thing I loved about this video and the "teacher" is he explains everything that he writes, what it does, and why he needs to write it.
I don't know why these Bootstrap videos don't have more views, they are easily the best bootstrap tutorials ever made
So happy to read that, thanks a lot!
The designers of Bootstrap are logical people who created a coherent system and your explanations as a programmer highlight the otherwise hidden inner logic the parts are built around. This makes learning meaningful and fun instead of feeling overwhelmed with another bunch of class names to memorize. Thanks a lot!
Dude, this is amazing. I love how you started with nothing, stopped and showed us what things did as you built it. Amazingly done. Much better than all of my professors.
I am a teacher and I can say that this is absolutely bloody excellent teaching from someone who knows his shit.
Fantastic pacing - just right, excellent explanation (using little 'mistakes' to illustrate function), love the use of the Inspector and really useful references to Flexbox that didn't complicate but actually illustrated ideas..
Doesn't get better than this - well done!
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.
Thanks so much Thomas, it really means a lot to me to get such an incredible feedback!
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!!
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 :)
Honestly....you made me cry. Never seen something explained so beautifully. I have a project due in two days and you just made it ten times better!
I'm in a coding boot camp right now and we are moving at a fast pace - this video greatly helped me keep up with Bootstrap right before we dove into Javascript. Big thank you and big subscribe!
Thanks a lot for both your awesome feedback and your support, happy to have you on board!
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!
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 :)
After years of coding with Bootstrap, I now finally understand how the navbar really works. Thank you for this clear and concise tutorial! :)
Happy to read that Erik, thanks a lot for your comment!
after spending ages just looking at examples with a bunch of classes I didnt understand this is exactly what i needed. thanks
Your videos are so helpful. The docs on the bootstrap page just don't explain enough for me so you taking the time to explain everything helps so much. Now I've got a functioning navbar thanks to you.
am I the only one or it is just soothing listening to the man talk - listen to when he says a lot of navs and nav-bars following each other
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!
Thank you so much for your awesome feedback, really great to have you on board of the channel :)
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.
What more can I say but thank you very very much for your wonderful feedback. This honestly means a lot to me :)
This is such a great series on Bootstrap 4. I was struggling at the code and was not able to get an idea of what was happening and which div/class did what. Thanks a lot for this detailed video series, everything makes sense now! Great content, keep up the good work!
Glad it helped!
Great tutorial. So good to HEAR somebody explain what they are doing. So many of these 'tutorials' no are just screen captures of people coding with ghastly royalty-free muzak blasting over the top of it! Keep it old skool!
Thanks a lot Michael, happy to read that you like the video!
Wow! Thanks so much. I am a mum of two toddlers, currently doing a course on web development. I got stock on this navbar topic for more than 4 days now and was frustrated with everything and boom! This video gave me the result I needed. I am so grateful👏🏼 now I can move forward😊
Excellent. Great idea to build bootstrap from the start. That way explaining how every element works. I have been searching for hours to find this out and to try and understand better.
Thanks a lot for your comment, happy to read that you like the video!
Bootstrap 5 also has a flexbox Navbar, and introduces new RTL support. For this reason the concept of "left" and "right" has been replaced with "start" and "end". Therefore the margin utilities changed for Bootstrap 5 beta:
ml-auto => ms-auto
mr-auto => me-auto
Also note that data-toggle and data-target have changed too:
data-toggle => data-bs-toggle
data-target => data-bs-target
My hero thank you man!
It is rare to leave comments on youtube for me, but in this case i give congratulations for these excellent videos!
Thank you very very much, really happy to read that you like the videos!
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!!
Really happy to read that you like my explanation Dan, greetings from Germany :)
I want to thank you sir you explanation dispel my doubts.
I took his angular course. This guy is one of the best at teaching how to code.
Thank you very much for both your awesome support and your great feedback Nicolas!
this guy is the best teacher ive seen around. bought some courses in udemy from him and are all great
Thanks so much for both your amazing feedback and your support here and on Udemy Tiago!
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.
Thanks a lot, happy to read that my explanation was helpful!
I watch other channels. No one explain all things with this much ease and details, you are great Max
YOU are great Vaibhav, thanks so much for your fantastic feedback :)
I love this very much, reading the official website and trying it, gets confusing. This is very easy to understand for the effort and explanation 5 stars for me . Thank you very much and I look forward for more videos from you.
Cheers!!!!
A great explanation more clear & concise than most online courses. I appreciate how you built it piece by piece letting us know what each class does.
It really means a lot to me to read that you liked the video Kendall, thank you very much!
I have been looking around to learn the bootstrap navbar, because i was not getting it by bootstrap DOC. But your video helped me a lot. Thank you
What a tutorial! this is by far unique, from the rest of tutorials I have watched on you-tube. In three terms I would say "SIMPLE, CLEAR AND ENGAGING" I will sleep well tonight as I have one part of my project done. Everything is well explained. I can't thank you enough for this tutorial, I will definitely check out Academind. HAPPY STUDENT:)
I'm currently in a data analyst bootcamp and this video was awesome! Thank you for explaining this so well!
So happy to read that Kajavia, thank you!
i was honestly having a hard time understanding this but the video helped a lot it was very clear on explaining things for sure recommend this!
awesome man .,..! Nicely explained . I have been struggling with this issue for past 2 days and you just resolved my issue in just 10 min. Thanks..!!
This was amazing! Exactly what I needed to complete my responsive site.
You are awesome ... very nicely explained even i do not understand in my boot camp spent lot of money in bootcamp .... you are best tutor ....
Thanks a lot!. I got interested in coding a few months ago. You've earned a subscriber and someone who will recommend this channel for sure. A very well explained video.
Thanks a lot for your support Mike, great to have you on board!
The way you explain each and every word you type is veeeeeeery useful for beginners. Keep it up. I subscribed.
Thank you, great to have you on board!
Thank you for going through it piece by piece - as someone new to bootstrap I find it really difficult to learn from the documentation examples which just show the entire code
You have no ideia how much this tutorial has helped me, im really thankful!!
Certainly earned a subscriber. Thanks for the straightforward explanation.
Thank you for your support, great to have you on board!
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.
I'm very happy to welcome you on board of the courses - thank you so much for your absolutely amazing feedback! :)
Loved the simple explanations... This is how every programming explanations should look like...
Thanks so much Ananda, happy to read that you liked my explanation!
Thank you for this, I was able to understand clearly the bootstrap classes with ease
Very clear tutorial, I'm pretty sure I understand everything... but I'm having an issue, has this method changed in Bootstrap 5.0? My navbar is working as in the tutorial, but the button is not toggling the menu. The documentation doesnt have 3 extra script includes as stated. So ive included what I see on the Getting started page ( boostrap.min.css & bootstrap.bundle.min.js, which seems to be a bundle ). Am I missing another include to make this work?
@@saad-dv5yr bingo, that worked! Thanks man!
@@saad-dv5yr Thank you, this is the current best solution for the button problem!
@@saad-dv5yr you are a hero.
@@lifewater i am having the same issue but i can see @saad 's comment .
Can anyone pls help?
@@georgedim1002 I’m not at my computer, so I cannot give you the exact answer, but I do remember this issue and I resolved it. I’m pretty sure bootstrap changed the class used. Once I figured out what it was this worked as intended
Excellent tutorial, loved the way you explain everything and demonstrate the principals. Subscribed and looking forward to seeing what else you do!
Thanks for both your awesome feedback and your support, great to have you on board!
Excellent tutorial. Not only explaining how, but also why.
Definitely the best video on RUclips!
Thanks Shay, awesome to read that!
I always scared of bootstrap navbar , but after watching this video. I'm damm confident. Thank you Sir !
Great to read that Rakshita, thank you!
This was amazing It is rare to leave comments on youtube for me
The best explanation about the way to do this. No doubt!
Awesome to read that Ronan, thanks a lot!
Thanks on this I know there is boostrap 5 ...but this saved my life
Why didn't i see your channel al this time. Explained perfect 👍
The way you teaching it's really awesome.
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/
Just awesome to read that the video was helpful for you Rodrigo, greetings from Germany :)
Thanks for this... i was having a hard time figuring all these. You really explained it well. Thanks alot. Great video!
Damn! That was really good! Good teaching skills, every step thoroughly explained and demonstrated.
Great explanation, showed me exactly what I wanted to know!
This video saved my 3 hours :)
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!
It honestly means a lot to me to get such a wonderful feedback. Thanks a lot for that!
Thanks for this video. It was really helpful. Providing explanations each step of the way really helped me to have a good understanding.
Thanks a lot for your awesome feedback Kathryn, happy to read that you liked my explanations!
Thank you. Awesome to see changes 1 by 1
Love ❤️ your teaching sir..and big fan of your teaching ❤️
Woowww ! Just astonished by the method you explain things :Very Clear and Comprehensive.
Gonna enroll on your udemy courses the soonest possible !
Thanks Maximillian and Keep Up the great job !
Thanks so much for your awesome feedback Mouhameth, really great to read that you liked the video! Thanks also for your support, looking forward to also have you on board on Udemy, just in case you're interested you can find all our courses right here => academind.com/learn/our-courses/
thanks u soo much !! explained bery clearly !!! I had already seen many other videos for navbar but understood clearly by urs !!!
Thank YOU for your great feedback Nizar, happy to read that the video made things clearer for you!
Thank you for solving my issue.
thank you you explained better than I expected. спасибо
Holy crap thanks, the docs kinda confused me a bit with all the classes stuff and you explained it beautifully
godly guide. simple short effective. impressed
I really liked the explanation of everything, and that you take the time to explain what everything does :D however, personally i just want the other two links in the navbar to be next to each other, without toggling the collapse function. this was the only thing that i felt was missing :)
I really liked the way you explained what each tag do. Thanks a lot :D
That's really great to read Luis, thank you very much for your comment!
i took a course on udemy about fullstack web developer. i reached a point where its about making navbar using bootstrap. its really frustrating because the list arent horizontal. the course didnt provide enough information. then i watched your video and my problem solved. thankyou verymuch !
That's amazing to hear, thank YOU so much!
Wonderful. Clear | Work | Thank You Very Much
Perfect pace, great content. Thank you!
Your videos are the best. You explain everything thoroughly. Question: How did you get the screen size display when in Chrome Dev Tools that show up in small text in the upper right when you resize the screen?
Very well explained man! I am now your new subscriber! Keep on making quality content. :D :D
Thanks and welcome
Simple & easy teaching, Many many thanks
Thanks a lot Mohammed, happy to read that you like it!
I am very happy to listen lesson,Thank you Sir.
Man this guy! Bootstrap 4 simplified!
Best teacher ever !!!
Great! Hope there will be a similar tutorial for Sidebar also
Grazie, sei molto chiaro e preciso. Complimenti
How to set the navbar toggler on the left site instead of the navbar brand?
the best bootstrap videos I've ever seen, thank you a lot)
Thank you very much for sharing, very well presented in a crystal clear manner, well done!
You are simply one of the best!!!
Thank you very much it was very amazing video. I only have one maybe two questions how to change navbar color in css. Or how to give it different color rather than light and dark. This was the bet video and well explained I learned a lot
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.
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 :)
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.
Nice presentation. Thanks for your time.
Very very very well explained. I loved the way you explained in detail. Add a Tag Bootstrap 4 Navbar in detail.
Great tutorial. Quick and to the point!
Thank you Richard!
Great!!! You are an amazing tutor. Thanks a lot
I'm so glad I discovered your tutorials - they are super helpful!
Thanks for the video which was thoroughly explained and easy to understand.
This guys knows everything about everything. Respect++ mr muller
Your udemy courses are amazing. Do you have one for bootstrap only
you give out so much positive energy 🙌❤
It really makes me happy to read that, thank you so much :)
very good explanation and have good pedagogy.
Nice! Great pace, perfect level of detail.