Bootstrap 5 Crash Course Tutorial #9 - Navbars
Вставка
- Опубліковано 20 чер 2021
- 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
This is the best bootstrap5 course I've seen
Thanks :)
I know
@@NetNinja 2 years later. still the best one
You explain Bootstrap navbar very well. Thanks mate
This video convinced me to subscribe to this channel.
I appreciate how well you made it crystal clear.
Brilliant...It's amazing how you explained everything. You have one more new subscriber. Keep it up with the good work. Cheers !!!
Awesome, thank you Jane, I appreciated that :)
amazing ! finally someone who is getting all this easier. Do you have a javacript complete course ?
it's funny to hear you say "crap, how am I gonna remember all of this classes"😆🤣
brilliant explanation!! thanks for the tutorial.
I learn a lot from your channel Shaun.. Always suport and Thankyou so much
thank you mate, amazing tutorial!!! 😊👍👍👍
Amazing video series. Thank you so much!
You're very welcome!
Thank you, Net Ninja!
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
Great to hear! :)
Thanks for the video!!
I'm a back-end guy and I hate all the front-end stuff 😄 thank you for the course it helps 😊🤓
Best Bootstrap tutorial on the internet 🚀
I agree!
Thank you for this
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?
thanks a lot best teacher ever
LMAO you're so much better than my instructor. FYI I'm not skipping any ads so you can have higher revenue in UA-cam hahah. Thank you for this wonderful tutorial.
Great content
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.
wow this tutorial helps alot
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
Amazing tutorial ^_^
Thanks👌👌
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.
add text-center"
ty
Thank you so much for your tutorials really helpful, could you please make tutorial describe Bootstrap Mega Navbar, thanks again.
At the end of this course, please explain about customization in Sass. thank you for this course.
Hey, I'll do this in the last couple of lessons - but also a new course about bootstrap 5 customization is coming soonish too.
@@NetNinja cool..you're awesome. Your vue course on udemy is amazing. Enjoying it now.
Thanks so much :)
@@NetNinja great. looking forward.
Vue couse link
thanks a lot
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
thank you!
You're welcome!
thanks
U are amazing
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 ?
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.
navbar is outside since it has to contain all the elements you use to create your navbar, it's also better for semantic html
how can we set a custom color for nav?
Is there a function in Bootstrap that makes the hamburger menu close automatically after clicking on a link?
Hey, can you make an Tutorial about the new Tailwind JIT Module?
I will try and fit this in soon :)
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
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
Great tutorial, but I don't think the class align-center is valid or does anything.
late to the party, but he probably means align-items-center
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?
I'm having the same issue. were you able to figure this out?
@@kenellem.6233 Hi, on the navigation container add margin-left: auto and it will put the buttons on the right.
@@TheMrFelin didn't work for me
Removing the container-xll worked for me :)
I had to add the class align-items-end on the ul-element
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.
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
@@michaelwest2451 Thanks buddy
great video but I still don't understand when people say bootstrap faster than css
Why the Bootstrap 5 classes name very confusing..?
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.... 🤣🤣🤣
🥰🥰🥰🥰🥰🥰🥰🥰
😣👍🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊
all of this is overwhelming... I hate this.
It's not. I love it
Everything went great until the 8th video my man. Stick with generic not building a website would have been much better.
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.
not satisfied...
Why?
womp womp