Bootstrap 5 Navbar Tutorial

Here's how to setup your navigation with Bootstrap 5 using the navbar class. I'll walk you through how to set it up along with ensuring the navigation is ADA accessible per the W3C.

** Be sure to stick around until the end to see how ADA accessibility works and how to check your site with Chrome's inspect. **

Purchase & Download the source code:

More Bootstap 5 Goodness:

In this video I'll cover how to:
- Build a basic nav bar
- Move the navigation to the right
- & Add a logo

Thanks!
Haydn

// COURSES THAT WILL HELP YOU BUILD BETTER WEBSITES

// Premium Gatsby Starter Template

// Helpful YouTube Playlists:

🛠 THE TOOLS & SERVICES I USE:

► Join ADWC Nation on Discord

DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!

Hi there! Haydn Adams, BFA. I'm all about helping web developers and web designers build better websites, through code. Yes, coding and be difficult at first. But I'm here to demystify that. To make coding easy so that you can ultimately build a better website.

Got a question for me?

[markandro]

Thank you so much! from all the channels I finally found the one who explains every tag atleast, not coding with just music! from now on I'll be following you! big support from Italy!

[ryanboll]

Thank you for actually having a detailed explanation of everything you're doing with examples at a speed that allows me to retain most of the information!

[vladimiraleksic]

A Designer who Codes and Explains in a clear and motivating way! Thanks a lot.

[j_u_d_y]

I am a beginner for BS5 and your tutorial is such a lifesaver!! Clean and structured. Thank you sooo much~~

[nnwebdigital]

Finally, I have found the way to move navigation to the right. Thank you very much! 👏

[ridaharun]

I spent one Hours sreaching to move navgationbar to right until i find you, , Really helpful

[otasofovwe]

Phew . Finally I can move nav items to the right with logo on the left . Thanks a lot for this .

[daraqadir]

Very helpful, the voice and the way you are talking very clear, Thank you master!

[peterochieng]

Thanks so much for this tutorial I'm a beginner and I really needed a step by step Navbar Tutorial yours is the best I've seen so far

[عبدالمعيد-غر]

Highly recommended !!! for beginner such a huge explanation I got lots of help with your videos.

[haypritam]

This is the best video on this topic. Thank you

[christellemata]

Omg! I don't know how to thank you i've been stuck for days ! keep it up the good Work!

[narenanand]

Stuck in this part for quite a lot of time. Thank you

[Crazyfish]

Thank you bro, I didn't know how to get the drop down text off the left side. Seems kinda obvious now!

[jackcollazo]

Excellent tutorial. I was missing the class "ms-auto" and this video explained it well. Thank you!

[my-trending]

Your tutorial on Navbar is very intuitive that I now understand it much better. Thank you for making this great video.

[phiro-tvx]

This is so clearly to understand it. Thank you for this tutorial.

[dp]

This is great, Bootstrap Navs are pretty easy, but to put the logo on the left and nav on far right stumped me, , , then suddenly!!! ms-auto ha ha hah aha, great stuff, thank you !!!

[syariefrahman]

Finally I can move nav items to the right, idk using row/col not work

[ThilinaWimalapriya]

This is completely understandable to anyone. Thanks for sharing your knowledge with us.