Navbar Bootstrap 5 | Bootstrap Navbar Tutorial
Vložit
- čas přidán 7. 09. 2024
- Navbar Bootstrap 5 | Bootstrap Navbar Tutorial
This tutorial navbar bootstrap 5 will cover how to make a navbar from scratch using the latest bootstrap 2021. This includes getting navbar logo and buttons up and running, ensure the navbar responsive design is working properly and different viewports and the responsive navbar also has things like a navbar dropdown with dropdown menu items and a navbar button.
This is essentially a bootstrap menu that you can use on the header of pages. the dropdown menu navigation is core to all websites and worth learning!
#navbar #bootstrap #tutorial
Learn Design for Developers!
A book I've created to help you improve the look of your apps and websites.
📘 Enhance UI: www.enhanceui....
Feel free to follow me on:
🐦 Twitter: in...
💬 Discord: / discord
💸 Patreon: / adriantwarog
Great tutorial! For anyone wondering, you can move the form up 1 line into the #navbarNav div to include it in the collapse action. This will also group it to the left, so you can add an "ms-auto" class to the form and it will float back to the right.
Please make a bootstrap 5 series
It’s in the agenda!
not sure if you guys gives a damn but if you are bored like me atm you can watch pretty much all of the latest series on InstaFlixxer. I've been watching with my gf for the last few months :)
@Walter Andy Yea, have been using InstaFlixxer for since december myself :)
@Walter Andy definitely, I've been using InstaFlixxer for months myself :)
Adrian, please do a footer than a sidebar. I would very much appreciate that.
Great video. I will use your video for my project - with acknowledgments, of course.
That was helpful. Thanks. Though I am not impressed with Bootstrap. To center an object, lets see, is it Text-center, justify-content-center, align-content-center, align-items-center. All valid options, yet none of them work.
I love u, for some reason on the bootstrap documentation is says to only use data-toggle & data-target. You're a legend!
Thank YOU SO MUCH! we cookin on this web programming final project.
Love it! I’m knew what bootstrap was but never used it but now I decided to learn it and this was a great and easy to understand tutorial!
Thank you very much I was trying drop down in navbar in react wasted a day this was helpful
Wow i was straggling to make the nav apper and just to find out its just bs wow thank u so much
Your videos are always 🧨🧨🧨
Thanks! excelent explanation, really helpful!
Best example of this on the internet!
Really great video 👍👍 more bootstrap videos are expected
Thanks for the tutorial! One thing that I and others might find useful is using the sticky-top class instead of fixed-top. fixed-top unfortunately would cover content on my page even when scrolled to the top.
fixed-top was driving me nuts overlapping the main section.. changed to sticky-top... halleluja! thanks for your comment!!!!
@@MarioKreeft Yea but watch out for sticky-top class because it may not be supported with every browser.
this video helps me to solve my responsive problem thank you ❤❤
teaching with dancing is cool bro
That tutorial was fast and good! Thanks man :)
Nice tutorial! more about bootstrap 5 please :D
easy and fast explanation bro
Thanks for uploading
Cheers
Great tutorial! I like the format also, thanks so much.
loved it youve been some great help brother
You are a legend Sir🙏🏾
LIKED AND SUBBED! Thanks :)
Thanks
Thanks alot for this video
It helped alot
All you have to know about navbars is in this video 💙
can you please mention the code snippet you are using
You saved me dude, thank you so much !
Amazing tutorial! Thank you
Thanks...keep up the good work 🙏
How do you collapse the head in 1:43?
Also my emmet abbreviation setting looks different than yours. Mine appears on the right and it's not as good as yours.
Pls make a video on adding social media icons to the right of navbar
awesome! tutorial!
Good tutorial, thanks!
Thanks for this really helpful video. Just something I discovered with by using Bootstrap 5.3. The first list element in the unordered list (ul) is interpreted like the brand. If you don't move the brand to the first position, the HOME li element does not align with the following li elements.
czcams.com/video/5RNW1xCE1Os/video.htmlsi=baPj1AFAFu5EGtRx
Thank you!
Hello there.
Great Channel.
Have you made a video on which modern way to "insert" header and footer across multiple HTML pages - similar to the way we used "includes" in .php pages in the past.
Thanks you.
Damn you good.
Haha thanks
Bro where is the code for these please kindly upload in github
Hey Adrian Twarog you probably forgot lol but a year ago Jun 14 2020 you uploaded your video called "WordPress Theme Development Tutorial 2020" and at the time stamp 5:32 you used a host file, Is there any way you still ahve that host file and can link it to me? I did not see a lnik in your video Thanks!
The host file is for setting a domain locally, it’s just a generic one which mapped local 127 to Wordpress site. Mac might be different but ideally google host file local domain via google and you should get the result :)
Thank You Bro. :)
Thank you Bro
Sir my Question is... How I can create navigation bar via using CSS! 🙏🏻
Great video! Thanks so much! I do have a question, the text in my dropdown "features" is all aligned to the right instead of the left. I followed your tutorial step by step and I can't see what I've done wrong here. Any help would be great!
Very interesting
great channel..
get to create sidebar with navbar using bootstrap 5?
Thank you. Can you share the code? And is there wiki or something of all the classes. And how would I position the menu items centrally with the logo to the left?
why is mine not inlining the nav I dont udnerstand im just following your guide 1:1
So i got up to the point where you typed in the aria- when i mirrored what you did it didnt highlight nor function. Can anyone tell me what i may have done wrong
Thanks Adrian, great stuff, However, my nav fixed-top class is working but covering the text in the body of the HTML, I used your code as is for practice and put the div.container before the nav and after Hello and added 10 random text paragraph with p*10>lorem50 and the nav bar convers the Hello and some of the text from paragraphs, I tried this in FF, Chrome and Edge ( all update as of Jan 26, 2022) and they all have the same issue. Any ideas?
Thanks
Kinda late here, use sticky instead of fixed.
I like your code editor theme. ☺☺Which dark theme are you using in your VS code editor?
do u hv tutorial bout tab-pane next button?
Great!!!
how to move the menu to the tight side ?
Please published Boostrap 5 more long project
how can we toggle navbar from left/right instead of downside
i have a small problem with the dropdown menu or the menu it self, it opens like it should but it doesnt close, how do i fix it ?
So you literally type the document code and call it a tutorial.
He actually copied the code from the other screen. Turning his head to look at the other screen and back again. He should just turn off his camera.
He also didn't finish off the navbar with the responsiveness of the search form.
My opinion is a fail. 🤦🏻♂️
can i get the source code?
My "Features" dropdown is not working. I double checked the code, but haven't found anything.
I fixed it by changing "data-bs-toggle" to "data-toggle"
Does anyone here know how to style the navbar so that when one of the buttons on the nav is selected it changes color?
Howww do I get the nav to distribute the items evenly horizontally across the screen
If I want to place the items vertically aligned under each other in the navbar-brand, how do I do that?
hi i have an problem with the toggler button I can't seem to click on the button any hellp
What font are you using in VSCode...I like it
Fire Code
@@AdrianTwarog am assuming that's supposed to be "Fira" rather than "Fire", right
Please how can I place the navitem any where in the navbar
Is it a common way to give the brand logo a fixed size?
sub for sure! ❤️
Hi Adrian! This was an amazing class! I believe I did something wrong though. Could you help me? This is the code for my toggled button. Unfortunately, once I click on it a second time to go away, it does not disappear.
Face of Wood
Home
Floors
Procedures
Same with me
anyone having problems with the nav icon to come out?
Which font do you use on vscode?
i need some help guys why after the toggle button for menu after i open it i cannot close it? anyone can explain, i use notepad++ to code it
same with me
Please how can I use it
Not working
sir with due respect i thought you would explain the individual terms and not just write those classes without explaining what those terms really meant..
what does navbar toggler, data bs toggle collapse means??????????????????? HOW THESE CLASSES INTERACT WITH EACH OTHER TO GIVE THE HAMBURGER MENU ITS EFFECT ?
and what are the functions of these classes :
- WHAT NAVBAR COLLPASE IS DOING AND WHAT COLLAPSE ROLE IS?
SIR CAN YOU KINDLY EXPLAIN IN ANOTHER VIDEO THE ROLES OR FUNCTIONS OF THESE CLASSES SO THAT THEY DONT APPEAR AS FOREIGN LANGUAGES TO ME???
THANKS
Like Like liiiiiiiiiiiiiiiiiike!
your look like mr beast but the big brother of him
Haha I get this all the time!
I' not gay but I love you and what you did.
Hello, How are you?
Yeah good, working hard and trying to make a video every now and then when I can that gives a bit of value :)
@@AdrianTwarog Yeah I am also good, trying to learn new things :)
Bro are you serious, what is the point of making a tutorial when you show the changes (refresh the page) after 10 lines of code as if we're supposed to know what is going to happen. You need to take this step by step when making a tutorial. You are writing like you're at work.
So basically,
1. You don't explain what you are writing (mostly), and even when you do then you don't show it on screen
2. You aren't showing how the code you've written changes the page (you do, just after like 10 steps, it's hard to tell what change is caused by what line of code)
my menu empty xD
You just copied the code from documentation
7:31
You do not take time to explain the bootstrap tags that you use. We are watching this tutorial not to see you design your nav bar but to make us understand how bootstrap works
Hello! We are currently working on an online payment system that uses cryptocurrency as a means of trade and we are looking for a front-end developer. In case you might be interested, please let us know!
yak
tak
Thanks Buddy for wasting my time
reading Bootstrap site, boring
Bro is just copy-pasting.
dude - great content but i couldnt stop getting annoyed at you repitively rubbing your chin. Thanks for the video though
How do I align the menu on the right just below the hamburger icon when it collapses?