Bootstrap 5 Crash Course Tutorial #9 - Navbars

In this Bootstrap 5 tutorial you'll learn how to use the navbar component and we'll add it to our page design.
🐱‍👤 View this course in full now - without ads - on Net Ninja Pro:
netninja.dev/p/bootstrap-5-cr...
🐱‍💻 Access the course files on GitHub:
github.com/iamshaunjp/bootstr...
🐱‍💻 HTML & CSS Crash Course:
• HTML & CSS Crash Cours...
🐱‍💻 Node.js Crash Course:
• Node JS Tutorial for B...
🐱‍💻 SASS Crash Course:
• SASS Tutorial #1 - Wha...
🐱‍💻 VS Code - code.visualstudio.com/
🐱‍💻 Bootstrap 5 Docs - getbootstrap.com/docs/5.0/get...
🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

[@baxiry.]

This is the best bootstrap5 course I've seen

[@NetNinja]

Thanks :)

[@antoniofuller2331]

I know

[@tharwatmella9932]

@@NetNinja 2 years later. still the best one

[@tinpham6413]

You explain Bootstrap navbar very well. Thanks mate

[@clintontilahun5689]

This video convinced me to subscribe to this channel. I appreciate how well you made it crystal clear.

[@janekostov7674]

Brilliant...It's amazing how you explained everything. You have one more new subscriber. Keep it up with the good work. Cheers !!!

[@NetNinja]

Awesome, thank you Jane, I appreciated that :)

[@alexisallengarcia6337]

it's funny to hear you say "crap, how am I gonna remember all of this classes"😆🤣 brilliant explanation!! thanks for the tutorial.

[@romeshjayawardene3551]

Amazing video series. Thank you so much!

[@NetNinja]

You're very welcome!

[@The-Dev-Ninja]

Thank you, Net Ninja!

[@elkhanhamet2561]

thank you mate, amazing tutorial!!! 😊👍👍👍

[@pixelxstudio9697]

I learn a lot from your channel Shaun.. Always suport and Thankyou so much

[@LuisHernandez-so8vu]

amazing ! finally someone who is getting all this easier. Do you have a javacript complete course ?

[@noobCoder26]

Best Bootstrap tutorial on the internet 🚀

[@limelnoll476]

I agree!

[@1Zero3Tech]

Thanks for the video!!

[@nikolaiandrov9820]

I'm a back-end guy and I hate all the front-end stuff 😄 thank you for the course it helps 😊🤓

[@itchitrigger8185]

Thank you for this

[@NEXTGEN_464]

I love it bootstrap 5 is awesome with the way you've delivered it I will be using it for my next client. You've also helped me leverage

[@NetNinja]

Great to hear! :)

[@aminaanfel9334]

thanks a lot best teacher ever

[@TekaneChaitanya]

Great content

[@yusefess]

At the end of this course, please explain about customization in Sass. thank you for this course.

[@NetNinja]

Hey, I'll do this in the last couple of lessons - but also a new course about bootstrap 5 customization is coming soonish too.

[@OnlyJavascript]

@@NetNinja cool..you're awesome. Your vue course on udemy is amazing. Enjoying it now.

[@NetNinja]

Thanks so much :)

[@masteryodaa69]

@@NetNinja great. looking forward.

[@xiaonaihe8929]

Vue couse link

[@ryanford516]

Great tutorial, thanks for explaining this stuff! Got a question about something that wasn't covered in this video though, so I thought maybe someone here could help me. In the official docs it says that "navbars are hidden by default when printing." I'm not sure I understand what is meant by it. I just put a nav element on my page and gave it a .navbar class. Added some lorem ipsum between the nav tags too. Did a Ctrl + P and behold, the lorem ipsum is right there, ready to be printed. What could "hidden when printing" really mean in this case?

[@ozdataservices8213]

wow this tutorial helps alot

[@ecb1336]

LMAO you're so much better than my instructor. FYI I'm not skipping any ads so you can have higher revenue in KZbin hahah. Thank you for this wonderful tutorial.

[@oskarstenerlow9754]

For anyone wanting the expanded list to appear below the button instead of on the left, try adding the class "align-items-end" on the ul-element. You might also need to change the container class from "container-xxl" to just "container". Hope this helps someone.

[@xfrazle]

add text-center"

[@hamzehqatash6256]

Amazing tutorial ^_^

[@devaraj6691]

Hello Ninja, Please do a video on graphql with react and redux.. there is a lot of confusion like 1. when we using graphql is that necessary to use apollo client. 2. Apollo client is a replacement for Redux 3. Both apollo and redux can be used in same project etc pls clarify

[@ridl27]

ty

[@AJAYY614]

Thanks👌👌

[@ilya_123__]

thank you!

[@NetNinja]

You're welcome!

[@ryanford516]

Shaun, I'd really appreciate it if you could help me justify the nav-items when they're expanded, such as at 10:32. How does one go about it? I'd like them to be positioned at the center rather than stick to the left side.

[@romeissa5232]

thanks a lot

[@salahalhashmi6528]

thanks

[@rehababdelwahab3987]

Thank you so much for your tutorials really helpful, could you please make tutorial describe Bootstrap Mega Navbar, thanks again.

[@limelnoll476]

Your videos helped me a lot! Mange tak! I would like to ask how can we add the hover effect onto links? So when I hover a link it gonna change its color into red as an example? Greetings from Denmark. Best regards

[@navidjalilian5087]

U are amazing

[@itorres008]

2:00 Why put the container under the navbar instead of the navbar under the container? Many of these choices are never explained in videos and tutorials.

[@leonardopo6202]

navbar is outside since it has to contain all the elements you use to create your navbar, it's also better for semantic html

[@cubasia16222]

I copied from githb your lesson and the links on the nav bar are not on the top navbar as you have shown, there are not visible, what is wrong ?

[@jimsohr]

Great tutorial, but I don't think the class align-center is valid or does anything.

[@NilEoe]

late to the party, but he probably means align-items-center

[@MaxPlayZ_1604]

Hey, can you make an Tutorial about the new Tailwind JIT Module?

[@NetNinja]

I will try and fit this in soon :)

[@aharubaru]

my english is not that well , cant even read that fast but damn, i could understand what you talking from the start to the end

[@gryp255]

Is there a function in Bootstrap that makes the hamburger menu close automatically after clicking on a link?

[@billyhonour1261]

Hey Ninjas, I would like to ask How to actually grasp bootstrap ?, Do I first understand the code orelse should I do it side by side to understand, coz i am not able to grasp those big big codes........ please need help anyone I would be grateful on your reply.

[@michaelwest2451]

you need to understand javascript and css.... with bootstrap, just copy and manipulate. not worth actually remembering all of this shit. just understand the basics of what bootstrap is manipulating

[@billyhonour1261]

@@michaelwest2451 Thanks buddy

[@hajji384]

🥰🥰🥰🥰🥰🥰🥰🥰

[@FameILY]

how can we set a custom color for nav?

[@shivaramr1170]

I want the navigations options to be seen on big screens and then instead of collapse I want them in offcanvas, searching for solutions everywhere and not getting

[@TheMrFelin]

Why when you have on navbar links justify-content-end the links are on the left when you expand it instead of the right? How to put them right below the expanding button?

[@kenellem.6233]

I'm having the same issue. were you able to figure this out?

[@TheMrFelin]

@@kenellem.6233 Hi, on the navigation container add margin-left: auto and it will put the buttons on the right.

[@michaelwest2451]

@@TheMrFelin didn't work for me

[@axica5434]

Removing the container-xll worked for me :)

[@oskarstenerlow9754]

I had to add the class align-items-end on the ul-element

[@pierrek1410]

great video but I still don't understand when people say bootstrap faster than css

[@fadhilh3931]

Why the Bootstrap 5 classes name very confusing..?

[@ishananaguru]

because they follow BEM model... they aren't that confusing lmao.... You need to learn BEM class naming convention also read Bootstrap documentation.... Lazy people are always complaining.... 🤣🤣🤣

[@HomelessDeamon]

😣👍🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊

[@TheBull06]

all of this is overwhelming... I hate this.

[@richardmartyns7978]

It's not. I love it

[@michaelblair5146]

Everything went great until the 8th video my man. Stick with generic not building a website would have been much better.

[@mikeritter7629]

I have to disagree, in my opinion it is way better to learn on a realworld example. Maybe it's just me but only learning the generics won't let me understand the great opportunities you get.

[@rehanahmed609]

not satisfied...

[@richardmartyns7978]

Why?

[@moldman5694]

womp womp