Bootstrap 4 Navbar Concepts | BOOTSTRAP 4 TUTORIAL

[@ScottStrittmatter]

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!

[@gonzovocado]

Thank you! I thought I made a typo or something.

[@63avtar]

You're a real one

[@lombre33]

thx a lot ! :)

[@rajeevchaudhary9422]

Is this nav bar not work with simple html code..i am a beginner I want to create nav bar

[@g0raxh812]

thanks man you saved me from getting depression and existential crisis

[@rushabhpatel4291]

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.

[@academind]

It really means a lot to me to read that you like my teaching style Rushabh, thank you very much for your comment!

[@crptc5707]

Totally agree, I've watched 5+ other videos and all of them just throw in classes without really explaining what is what...

[@doclorianrin7543]

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.

[@chojames3726]

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

[@eliastodakee]

Maximilian is the best!

[@TheHPure]

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.

[@__justberat]

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.

[@fregattkapitany2608]

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!

[@runthomas]

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]

Thanks so much Thomas, it really means a lot to me to get such an incredible feedback!

[@alexiscarpio8379]

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!

[@mettek88]

It is rare to leave comments on youtube for me, but in this case i give congratulations for these excellent videos!

[@academind]

Thank you very very much, really happy to read that you like the videos!

[@loosabway3400]

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!

[@shumit]

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]

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 :)

[@tomrowbotham4369]

after spending ages just looking at examples with a bunch of classes I didnt understand this is exactly what i needed. thanks

[@droodthedude]

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]

Really happy to read that you like my explanation Dan, greetings from Germany :)

[@sourabhjain4384]

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

[@Anas_Vigilante]

My hero thank you man!

[@anaghgupta9348]

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!

[@academind]

Glad it helped!

[@SzTz100]

I don't know why these Bootstrap videos don't have more views, they are easily the best bootstrap tutorials ever made

[@academind]

So happy to read that, thanks a lot!

[@snackgobblin]

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!

[@academind]

Thanks a lot for both your awesome feedback and your support, happy to have you on board!

[@iangroen7744]

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.

[@ZabalaJess]

This was amazing! Exactly what I needed to complete my responsive site.

[@TyllarTV]

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]

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 :)

[@joeldove9762]

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

[@gwe987]

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.

[@academind]

Thanks a lot for your comment, happy to read that you like the video!

[@downthehollow8699]

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]

What more can I say but thank you very very much for your wonderful feedback. This honestly means a lot to me :)

[@mickymazda1]

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!

[@academind]

Thanks a lot Michael, happy to read that you like the video!

[@ElVitolacho]

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]

Thank you so much for your awesome feedback, really great to have you on board of the channel :)

[@erikbriones]

After years of coding with Bootstrap, I now finally understand how the navbar really works. Thank you for this clear and concise tutorial! :)

[@academind]

Happy to read that Erik, thanks a lot for your comment!

[@tiaroque]

this guy is the best teacher ive seen around. bought some courses in udemy from him and are all great

[@academind]

Thanks so much for both your amazing feedback and your support here and on Udemy Tiago!

[@fluffyfirehydrant]

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

[@ultiumlabs4899]

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]

Thanks a lot, happy to read that my explanation was helpful!

[@winniea504]

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😊

[@Lucas-fv3fx]

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!

[@kendallhayes4917]

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.

[@academind]

It really means a lot to me to read that you liked the video Kendall, thank you very much!

[@vaibhavm1986]

I watch other channels. No one explain all things with this much ease and details, you are great Max

[@academind]

YOU are great Vaibhav, thanks so much for your fantastic feedback :)

[@sushantsinghrathore1]

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..!!

[@nicolepinhal5636]

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:)

[@johnjakejohnjake9209]

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

[@Nicolaslule]

I took his angular course. This guy is one of the best at teaching how to code.

[@academind]

Thank you very much for both your awesome support and your great feedback Nicolas!

[@sdwhitesox8039]

Certainly earned a subscriber. Thanks for the straightforward explanation.

[@academind]

Thank you for your support, great to have you on board!

[@jenissonlima7466]

The way you explain each and every word you type is veeeeeeery useful for beginners. Keep it up. I subscribed.

[@academind]

Thank you, great to have you on board!

[@singkayjay]

I'm currently in a data analyst bootcamp and this video was awesome! Thank you for explaining this so well!

[@academind]

So happy to read that Kajavia, thank you!

[@muzammilak47]

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

[@rajeshrana8885]

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

[@philipphahmann5971]

You have no ideia how much this tutorial has helped me, im really thankful!!

[@ananth18oct]

Loved the simple explanations... This is how every programming explanations should look like...

[@academind]

Thanks so much Ananda, happy to read that you liked my explanation!

[@aquila813apologetics3]

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.

[@academind]

Thanks a lot for your support Mike, great to have you on board!

[@ariannycolmenares5333]

This was amazing It is rare to leave comments on youtube for me

[@yuriyarin4027]

Damn! That was really good! Good teaching skills, every step thoroughly explained and demonstrated.

[@ShayAxelod22]

Definitely the best video on KZbin!

[@academind]

Thanks Shay, awesome to read that!

[@Saiphes]

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]

I'm very happy to welcome you on board of the courses - thank you so much for your absolutely amazing feedback! :)

[@dddoes9528]

I want to thank you sir you explanation dispel my doubts.

[@andrewmathenge3400]

Excellent tutorial. Not only explaining how, but also why.

[@MarkNDelaSanta]

Thank you for this, I was able to understand clearly the bootstrap classes with ease

[@banjoquint]

Excellent tutorial, loved the way you explain everything and demonstrate the principals. Subscribed and looking forward to seeing what else you do!

[@academind]

Thanks for both your awesome feedback and your support, great to have you on board!

[@lifewater]

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?

[@lifewater]

@@saad-dv5yr bingo, that worked! Thanks man!

[@minecrafthowtodude]

@@saad-dv5yr Thank you, this is the current best solution for the button problem!

[@ankitsharma1072]

@@saad-dv5yr you are a hero.

[@georgedim1002]

@@lifewater i am having the same issue but i can see @saad 's comment . Can anyone pls help?

[@lifewater]

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

[@achiengO]

Thanks on this I know there is boostrap 5 ...but this saved my life

[@georgechiedu6207]

Thanks for this... i was having a hard time figuring all these. You really explained it well. Thanks alot. Great video!

[@mkay7800]

This video saved my 3 hours :)

[@gopikrishnan1076]

Why didn't i see your channel al this time. Explained perfect 👍

[@3rdpoly]

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]

It honestly means a lot to me to get such a wonderful feedback. Thanks a lot for that!

[@gayuraja8519]

The way you teaching it's really awesome.

[@soumyazyx]

Perfect pace, great content. Thank you!

[@aslahphussain]

Man this guy! Bootstrap 4 simplified!

[@ronanejessicamendes1798]

The best explanation about the way to do this. No doubt!

[@academind]

Awesome to read that Ronan, thanks a lot!

[@kam6594]

Thanks for this video. It was really helpful. Providing explanations each step of the way really helped me to have a good understanding.

[@academind]

Thanks a lot for your awesome feedback Kathryn, happy to read that you liked my explanations!

[@brendan2240]

Thank you. Awesome to see changes 1 by 1

[@DizzinOG]

How to set the navbar toggler on the left site instead of the navbar brand?

[@arnabthakuria2243]

This guys knows everything about everything. Respect++ mr muller

[@arnabthakuria2243]

Your udemy courses are amazing. Do you have one for bootstrap only

[@mihajlom1k1]

Great explanation, showed me exactly what I wanted to know!

[@bigdnotation]

the best bootstrap videos I've ever seen, thank you a lot)

[@zerosandones7547]

Very well explained man! I am now your new subscriber! Keep on making quality content. :D :D

[@academind]

Thanks and welcome

[@nizarkadri3109]

thanks u soo much !! explained bery clearly !!! I had already seen many other videos for navbar but understood clearly by urs !!!

[@academind]

Thank YOU for your great feedback Nizar, happy to read that the video made things clearer for you!

[@rakshitapaliwal5101]

I always scared of bootstrap navbar , but after watching this video. I'm damm confident. Thank you Sir !

[@academind]

Great to read that Rakshita, thank you!

[@henrifortier8621]

godly guide. simple short effective. impressed

[@mikebutak]

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?

[@jagjotsingh9492]

Waoooo....u explained each and everything perfectly man...its amazing. Thanks a lot.

[@hamzajaved1115]

You Are Amazing Person!!!!

[@academind]

YOU are amazing Hamza, thank you so much for your comment :)

[@mouhamethfadalmarabyaidara4935]

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 !

[@academind]

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/

[@lokeshwaran7671]

Thank you for solving my issue.

[@novaknovakovic1585]

Excellent presentation. Good teaching skills, every step thoroughly explained and demonstrated.

[@somuravi4211]

Love ❤️ your teaching sir..and big fan of your teaching ❤️

[@gonzovocado]

I'm so glad I discovered your tutorials - they are super helpful!

[@abduvakilaxrorov9072]

thank you you explained better than I expected. спасибо

[@daon23]

Holy crap thanks, the docs kinda confused me a bit with all the classes stuff and you explained it beautifully

[@faizaanscnz]

Sir i became your FAN wonderfully explained

[@academind]

Thank you so much Faizaan!

[@mohammedshamsulislam1382]

Simple & easy teaching, Many many thanks

[@academind]

Thanks a lot Mohammed, happy to read that you like it!

[@mohammedshamsulislam1382]

I am very happy to listen lesson,Thank you Sir.

[@rohanvaish8028]

love the way you explain each and every point in detail but can you tell me how to set manually breakpoint of menu button in this way i.e media screen and (max-width: 1152px) , media screen and (max-width: 1040px) etc...?

[@Anas_Vigilante]

Best teacher ever !!!

[@__Rodrigo__]

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]

Just awesome to read that the video was helpful for you Rodrigo, greetings from Germany :)

[@zeafromarhailemariam1632]

You are simply one of the best!!!

[@ManojYadwad2]

Very very very well explained. I loved the way you explained in detail. Add a Tag Bootstrap 4 Navbar in detail.

[@ricardoassis8400]

thanks my frind, with your explanation I finally got it!

[@SpecialPark]

Wonderful. Clear | Work | Thank You Very Much

[@jrmatlanta736]

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?

[@cabosanlucasbaja]

Great tutorial. Quick and to the point!

[@academind]

Thank you Richard!

[@LuisVillegasVargas]

I really liked the way you explained what each tag do. Thanks a lot :D

[@academind]

That's really great to read Luis, thank you very much for your comment!

[@suldra915]

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 :)

[@imtanuki4106]

Nice! Great pace, perfect level of detail.

[@gmanstrong2378]

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

[@gsinfotechcreativecomputer2296]

Wow Nice Explanation too nice sir.

[@MpomartMedia]

Thank you very much for sharing, very well presented in a crystal clear manner, well done!

[@kumailkhan4139]

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.

[@academind]

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 :)

[@kumailkhan4139]

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.