Hello in this bootstrap four video, we're going to cover nav bars, which are simple wrappers for positioning, sort of branding information, for example, like logos navigational elements into basically a nice looking header effectively on any website. They had some sort of navigational bar. So let me quickly go on a couple of websites. So if I go to youtube.com, and go to our website as well, so no system and actually I go to sonar learning. Let's close that. So yeah, we have a nav bar.

So this is our nav bar right here it has a logo has a login button. And for the YouTube nav bar, they have a lot of load drop down of the logo, search box button and a couple of other buttons as both pretty much any website that you'll go on has some form of navbar. And boost up luckily led you to implement it very very easily. So let's get on to the code in. First of all, you're going to want a element called nav. And inside this will be all of the navigation or content.

So it needs a few classes in it nav bar, nav bar, that's light. So this is just a style or like the color in and we'll show you now bar dash dark as long in a moment. bg dash faded. And then inside here, it's gonna have a class of nav ball, dash run. Hey, track, this is usually like the logo or the name of your website and when you click it, you just take you back to the homepage. For this videos compra hassle doesn't take you anywhere.

And inside here I was gonna put Callie home. Actually, I want to call it company logo. That's usually what it is. And inside here, you can put an image if you want to really simple. Now we're gonna have an unordered list and these will be the list items aka other items in our navbar and this needs a class of nav, nav bar, nav. And inside here we put our list item.

So the first list item need a class of nav, the quotation marks nav, dash pointer. We're also gonna put a class of active so disputed Plot item looks like it's active, usually sitting indicating that the user is on that page. And inside here, we're gonna put up a class equals nav dash link href. And again was gonna put a hash so to take us anywhere, anytime do we'll put home put a tag of ban Class S or dash only wishes for screen readers. And inside here, we're gonna put current so this just say, this is deep ticular open that we are currently on. Again, just screen readers.

And that is one list item don't I'm just going to copy and paste it to save some time. First of all need to remove the actives, we only want one item active at any given time happy with a hash been there. We don't want it to link to anywhere for now, on chain these two features, copy and paste that I'm going to change this to about to contact us. So if we save that now, we're also outside the unordered list, we're going to create a form. And this is going to contain a search box and the bottom. All of these items.

You don't have to have them necessarily in this order. You don't have to have all these items you can very, very can have more you can have less. That's the beauty of what we're doing. It's customizable. So we're gonna put a class in here formed in line nav bar, dash form. Poor dash, right?

Poor dash ROI just says, anchor it to the right hand side. So even when it's small or big, it's always gonna be on the right. That's very common to have some sort of form element. And in this case, it's going to be a search box. not going to do anything, but it's just going to simulate a search box. gonna print input with a class of form control type equals text for a placeholder.

And for this output search, I'm gonna put up button class btn btn. So if you put any sort of button you want to outline because separate video in this series covering how to use buttons, check that and for more information. And in here, we're gonna put search Save there should be ready to run this in our web browser. There we go. We have our navigational menu. Obviously, when we click these, they don't do anything because we haven't made them go to a specific page.

Generally, you most likely would. So we got our company logo here, or the technical company logo looks that easy. You can add an image there, we got a text box. And if I click on it, it highlights it. And we've got a button. We've already got a navigational system in about less than 10 minutes.

That looks good enough, especially if we add a logo there to be on a top end website. And that's the beauty of bootstrap. Now into this simplify responsive design. It provides a bunch of components that we're covering in this series to help and ease UI development. If you have any questions, feel free to post them on our education platform. So no learning Dakota you For slash question dot php, there'll be a link in the description to that.

Please rate, comment and subscribe as it really does help us grow and provide more content. And as usual, thank you for watching and I hope you have a great day.