Navbar Bootstrap 5 | Bootstrap Navbar Tutorial

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

[@yuusource831]

Adrian, please do a footer than a sidebar. I would very much appreciate that.

[@abbassher201]

Please make a bootstrap 5 series

[@AdrianTwarog]

It’s in the agenda!

[@walterandy7050]

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

[@jaxshane6746]

@Walter Andy Yea, have been using InstaFlixxer for since december myself :)

[@zanderraylan8518]

@Walter Andy definitely, I've been using InstaFlixxer for months myself :)

[@pedropereiradias5843]

AMAZING TUTORIAL! AWESOME.

[@Dadead1601]

I love u, for some reason on the bootstrap documentation is says to only use data-toggle & data-target. You're a legend!

[@francescociulla]

Your videos are always 🧨🧨🧨

[@DougSchofield]

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.

[@escapingthenorm2205]

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!

[@shrikrushnakaphare2486]

Thank you very much I was trying drop down in navbar in react wasted a day this was helpful

[@arathijagdish8772]

can you please mention the code snippet you are using

[@amritgopinath9540]

Really great video 👍👍 more bootstrap videos are expected

[@vladimiraleksic4066]

Great video. I will use your video for my project - with acknowledgments, of course.

[@Nxrth2001]

That tutorial was fast and good! Thanks man :)

[@TriggerBeat]

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.

[@MarioKreeft]

fixed-top was driving me nuts overlapping the main section.. changed to sticky-top... halleluja! thanks for your comment!!!!

[@stefcioss1]

@@MarioKreeft Yea but watch out for sticky-top class because it may not be supported with every browser.

[@MsPaskota]

Wow i was straggling to make the nav apper and just to find out its just bs wow thank u so much

[@gamelifer234]

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.

[@businessman6726]

teaching with dancing is cool bro

[@dholearihant2187]

loved it youve been some great help brother

[@vincejacobs566]

Great tutorial! I like the format also, thanks so much.

[@mbozar7572]

LIKED AND SUBBED! Thanks :)

[@unowho117]

Amazing tutorial! Thank you

[@azzedinebekkar2813]

You saved me dude, thank you so much !

[@shrinjitsharma2845]

Thanks...keep up the good work 🙏

[@Sully2161]

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.

[@edwarddiaz7094]

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

[@tabau2]

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!

[@AdrianTwarog]

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

[@davidoyewale1085]

Thanks alot for this video It helped alot

[@RobMatthews21]

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?

[@peppis3408]

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 ?

[@jith2545]

Thanks for uploading

[@AdrianTwarog]

Cheers

[@saffrondionysius072]

Pls make a video on adding social media icons to the right of navbar

[@akichoe]

do u hv tutorial bout tab-pane next button?

[@BruceLee-sp5wn]

Sir my Question is... How I can create navigation bar via using CSS! 🙏🏻

[@usmanmunir1559]

All you have to know about navbars is in this video 💙

[@oreki9048]

why is mine not inlining the nav I dont udnerstand im just following your guide 1:1

[@williammartinez7172]

awesome! tutorial!

[@zoelkh]

great channel.. get to create sidebar with navbar using bootstrap 5?

[@eternalwisdoms18]

how can we toggle navbar from left/right instead of downside

[@tahsintanveer1808]

How do I align the menu on the right just below the hamburger icon when it collapses?

[@realcolormusic]

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.

[@Pro_Developer65]

kzbin.info/www/bejne/a4OxiGSueKpkhdUsi=baPj1AFAFu5EGtRx

[@manohar3626]

hi i have an problem with the toggler button I can't seem to click on the button any hellp

[@prod.marquete3294]

If I want to place the items vertically aligned under each other in the navbar-brand, how do I do that?

[@ChrisTompkins-cy1go]

My "Features" dropdown is not working. I double checked the code, but haven't found anything.

[@ChrisTompkins-cy1go]

I fixed it by changing "data-bs-toggle" to "data-toggle"

[@tymiller2596]

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.

[@samuelabel6091]

Please how can I place the navitem any where in the navbar

[@cherry-lp8yq]

can i get the source code?

[@tim_ny]

What font are you using in VSCode...I like it

[@AdrianTwarog]

Fire Code

[@tim_ny]

​@@AdrianTwarog​ am assuming that's supposed to be "Fira" rather than "Fire", right

[@SpecialPark]

Thank You Bro. :)

[@loganmarsh3584]

Does anyone here know how to style the navbar so that when one of the buttons on the nav is selected it changes color?

[@Sneeit]

So you literally type the document code and call it a tutorial.

[@sigma_z]

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. 🤦🏻‍♂️

[@Shoi-0]

Thanks

[@touhidsourav2475]

Which font do you use on vscode?

[@learningtostream3919]

Damn you good.

[@AdrianTwarog]

Haha thanks

[@leticiabraga478]

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

[@tomiwachlin6528]

Same with me

[@mdsaifullah6305]

Please published Boostrap 5 more long project

[@dominicokechukwu8444]

Very interesting

[@hakimssszzz9289]

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

[@mymakers5983]

same with me

[@DeekshithT-ku5ce]

Not working

[@supratimchoudhury1492]

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

[@alfredkufa3135]

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)

[@JohnDoe-qm8ns]

7:31

[@ideagame3633]

Like Like liiiiiiiiiiiiiiiiiike!

[@tanphatnguyen9047]

my menu empty xD

[@notbeluga8249]

You just copied the code from documentation

[@somichi3629]

your look like mr beast but the big brother of him

[@AdrianTwarog]

Haha I get this all the time!

[@oluchukwuughagwu8293]

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

[@theblackelephant]

yak

[@AdrianTwarog]

tak

[@scrab4ever]

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!

[@dogoodhavegood229]

Thanks Buddy for wasting my time

[@Aizaz_Raza]

Bro is just copy-pasting.

[@nithin3476]

Bro where is the code for these please kindly upload in github

[@alkay7283]

Thanks! excelent explanation, really helpful!

[@thirstyturbo]

dude - great content but i couldnt stop getting annoyed at you repitively rubbing your chin. Thanks for the video though

[@tanmaygautam1348]

Hello, How are you?

[@AdrianTwarog]

Yeah good, working hard and trying to make a video every now and then when I can that gives a bit of value :)

[@tanmaygautam1348]

@@AdrianTwarog Yeah I am also good, trying to learn new things :)

[@1AtlantaKid]

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

[@gael6252]

Kinda late here, use sticky instead of fixed.

[@zeke2269]

how to move the menu to the tight side ?

[@fuggeldev]

Nice tutorial! more about bootstrap 5 please :D

[@bigjenny7954]

Is it a common way to give the brand logo a fixed size?

[@barrington4800]

Thank YOU SO MUCH! we cookin on this web programming final project.

[@maahhkusful]

Howww do I get the nav to distribute the items evenly horizontally across the screen

[@huseyinlora]

reading Bootstrap site, boring

[@katiesbothers]

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!

[@محمدبدری-ل9ح]

this video helps me to solve my responsive problem thank you ❤❤

[@robertoc4490]

anyone having problems with the nav icon to come out?

[@bigjenny7954]

You are a legend Sir🙏🏾

[@kalpanajanarthanam4524]

I like your code editor theme. ☺☺Which dark theme are you using in your VS code editor?

[@riyasv.a4409]

easy and fast explanation bro

[@belloabdul-azeezikhanaede5672]

Please how can I use it

[@xczm225]

sub for sure! ❤️

[@SolomonGezu]

Thank you Bro

[@enesaytekin5827]

Great!!!

[@ruvindatharaka8621]

Thank you!

[@HemmingEducation]

Best example of this on the internet!

[@piegpa]

Good tutorial, thanks!