Bootstrap 5 Crash Course Tutorial #9 - Navbars

  Рет қаралды 124,459

Net Ninja

Net Ninja

3 жыл бұрын

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

Пікірлер: 80
@baxiry.
@baxiry. 3 жыл бұрын
This is the best bootstrap5 course I've seen
@NetNinja
@NetNinja 3 жыл бұрын
Thanks :)
@antoniofuller2331
@antoniofuller2331 3 жыл бұрын
I know
@tharwatmella9932
@tharwatmella9932 Ай бұрын
@@NetNinja 2 years later. still the best one
@tinpham6413
@tinpham6413 2 жыл бұрын
You explain Bootstrap navbar very well. Thanks mate
@alexisallengarcia6337
@alexisallengarcia6337 Жыл бұрын
it's funny to hear you say "crap, how am I gonna remember all of this classes"😆🤣 brilliant explanation!! thanks for the tutorial.
@clintontilahun5689
@clintontilahun5689 Жыл бұрын
This video convinced me to subscribe to this channel. I appreciate how well you made it crystal clear.
@janekostov7674
@janekostov7674 Жыл бұрын
Brilliant...It's amazing how you explained everything. You have one more new subscriber. Keep it up with the good work. Cheers !!!
@NetNinja
@NetNinja Жыл бұрын
Awesome, thank you Jane, I appreciated that :)
@elkhanhamet2561
@elkhanhamet2561 2 жыл бұрын
thank you mate, amazing tutorial!!! 😊👍👍👍
@The-Dev-Ninja
@The-Dev-Ninja 3 жыл бұрын
Thank you, Net Ninja!
@romeshjayawardene3551
@romeshjayawardene3551 2 жыл бұрын
Amazing video series. Thank you so much!
@NetNinja
@NetNinja 2 жыл бұрын
You're very welcome!
@LuisHernandez-so8vu
@LuisHernandez-so8vu Жыл бұрын
amazing ! finally someone who is getting all this easier. Do you have a javacript complete course ?
@pixelxstudio9697
@pixelxstudio9697 3 жыл бұрын
I learn a lot from your channel Shaun.. Always suport and Thankyou so much
@1Zero3Tech
@1Zero3Tech 2 жыл бұрын
Thanks for the video!!
@nikolaiandrov9820
@nikolaiandrov9820 6 ай бұрын
I'm a back-end guy and I hate all the front-end stuff 😄 thank you for the course it helps 😊🤓
@noobCoder26
@noobCoder26 2 жыл бұрын
Best Bootstrap tutorial on the internet 🚀
@limelnoll476
@limelnoll476 Жыл бұрын
I agree!
@NEXTGEN_464
@NEXTGEN_464 5 ай бұрын
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
@NetNinja 5 ай бұрын
Great to hear! :)
@aminaanfel9334
@aminaanfel9334 2 жыл бұрын
thanks a lot best teacher ever
@itchitrigger8185
@itchitrigger8185 2 жыл бұрын
Thank you for this
@TekaneChaitanya
@TekaneChaitanya 3 жыл бұрын
Great content
@ozdataservices8213
@ozdataservices8213 10 ай бұрын
wow this tutorial helps alot
@hamzehqatash6256
@hamzehqatash6256 2 жыл бұрын
Amazing tutorial ^_^
@ecb1336
@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
@oskarstenerlow9754 2 ай бұрын
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
@xfrazle 8 күн бұрын
add text-center"
@limelnoll476
@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
@AJAYY614
@AJAYY614 7 ай бұрын
Thanks👌👌
@ryanford516
@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?
@romeissa5232
@romeissa5232 Жыл бұрын
thanks a lot
@rehababdelwahab3987
@rehababdelwahab3987 2 жыл бұрын
Thank you so much for your tutorials really helpful, could you please make tutorial describe Bootstrap Mega Navbar, thanks again.
@ilya_123__
@ilya_123__ 3 ай бұрын
thank you!
@NetNinja
@NetNinja 3 ай бұрын
You're welcome!
@salahalhashmi6528
@salahalhashmi6528 3 жыл бұрын
thanks
@ryanford516
@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.
@itorres008
@itorres008 9 ай бұрын
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
@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
@ridl27
@ridl27 2 жыл бұрын
ty
@navidjalilian5087
@navidjalilian5087 2 жыл бұрын
U are amazing
@yusefess
@yusefess 3 жыл бұрын
At the end of this course, please explain about customization in Sass. thank you for this course.
@NetNinja
@NetNinja 3 жыл бұрын
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
@OnlyJavascript 3 жыл бұрын
@@NetNinja cool..you're awesome. Your vue course on udemy is amazing. Enjoying it now.
@NetNinja
@NetNinja 3 жыл бұрын
Thanks so much :)
@masteryodaa69
@masteryodaa69 3 жыл бұрын
@@NetNinja great. looking forward.
@xiaonaihe8929
@xiaonaihe8929 Жыл бұрын
Vue couse link
@devaraj6691
@devaraj6691 3 жыл бұрын
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
@cubasia16222
@cubasia16222 2 жыл бұрын
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 ?
@FameILY
@FameILY Жыл бұрын
how can we set a custom color for nav?
@gryp255
@gryp255 Жыл бұрын
Is there a function in Bootstrap that makes the hamburger menu close automatically after clicking on a link?
@MaxPlayZ_1604
@MaxPlayZ_1604 3 жыл бұрын
Hey, can you make an Tutorial about the new Tailwind JIT Module?
@NetNinja
@NetNinja 3 жыл бұрын
I will try and fit this in soon :)
@shivaramr1170
@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
@jimsohr
@jimsohr Жыл бұрын
Great tutorial, but I don't think the class align-center is valid or does anything.
@NilEoe
@NilEoe 4 ай бұрын
late to the party, but he probably means align-items-center
@aharubaru
@aharubaru 2 жыл бұрын
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
@TheMrFelin
@TheMrFelin 2 жыл бұрын
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
@kenellem.6233 2 жыл бұрын
I'm having the same issue. were you able to figure this out?
@TheMrFelin
@TheMrFelin 2 жыл бұрын
@@kenellem.6233 Hi, on the navigation container add margin-left: auto and it will put the buttons on the right.
@michaelwest2451
@michaelwest2451 2 жыл бұрын
@@TheMrFelin didn't work for me
@axica5434
@axica5434 4 ай бұрын
Removing the container-xll worked for me :)
@oskarstenerlow9754
@oskarstenerlow9754 2 ай бұрын
I had to add the class align-items-end on the ul-element
@billyhonour1261
@billyhonour1261 2 жыл бұрын
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
@michaelwest2451 2 жыл бұрын
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
@billyhonour1261 2 жыл бұрын
@@michaelwest2451 Thanks buddy
@pierrek1410
@pierrek1410 2 жыл бұрын
great video but I still don't understand when people say bootstrap faster than css
@hajji384
@hajji384 3 жыл бұрын
🥰🥰🥰🥰🥰🥰🥰🥰
@fadhilh3931
@fadhilh3931 2 жыл бұрын
Why the Bootstrap 5 classes name very confusing..?
@ishananaguru
@ishananaguru 2 жыл бұрын
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
@HomelessDeamon 3 жыл бұрын
😣👍🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊
@TheBull06
@TheBull06 Жыл бұрын
all of this is overwhelming... I hate this.
@richardmartyns7978
@richardmartyns7978 Жыл бұрын
It's not. I love it
@michaelblair5146
@michaelblair5146 2 жыл бұрын
Everything went great until the 8th video my man. Stick with generic not building a website would have been much better.
@mikeritter7629
@mikeritter7629 2 жыл бұрын
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
@rehanahmed609 Жыл бұрын
not satisfied...
@richardmartyns7978
@richardmartyns7978 Жыл бұрын
Why?
@moldman5694
@moldman5694 8 ай бұрын
womp womp
Bootstrap 5 Crash Course Tutorial #10 - Cards
12:24
Net Ninja
Рет қаралды 90 М.
Navbar Bootstrap 5 |  Bootstrap Navbar Tutorial
17:59
Adrian Twarog
Рет қаралды 245 М.
Универ. 10 лет спустя - ВСЕ СЕРИИ ПОДРЯД
9:04:59
Комедии 2023
Рет қаралды 2,5 МЛН
I wish I could change THIS fast! 🤣
00:33
America's Got Talent
Рет қаралды 55 МЛН
Final muy inesperado 🥹
00:48
Juan De Dios Pantoja
Рет қаралды 18 МЛН
ROCK PAPER SCISSOR! (55 MLN SUBS!) feat @PANDAGIRLOFFICIAL #shorts
00:31
Navbar CSS Tutorial: 3 Ways to Create a Navigation Bar with Flexbox
15:08
New Grid System in Bootstrap 5 (Practical Examples)
19:08
ByteGrad
Рет қаралды 23 М.
Bootstrap 5 Crash Course
1:11:15
Web Dev Simplified
Рет қаралды 447 М.
How to create a CSS navigation bar in 6 minutes! 🧭
6:28
Bro Code
Рет қаралды 226 М.
Bootstrap 5 Navbar Tutorial
13:57
A Designer Who Codes
Рет қаралды 124 М.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
developedbyed
Рет қаралды 911 М.
Bootstrap 5 Crash Course Tutorial #11 - Accordions
11:59
Net Ninja
Рет қаралды 81 М.
How To Make Responsive Navbar with Bootstrap 5 | Step by Step Tutorial
12:58
Универ. 10 лет спустя - ВСЕ СЕРИИ ПОДРЯД
9:04:59
Комедии 2023
Рет қаралды 2,5 МЛН