Bootstrap 5 Crash Course Tutorial #9 - Navbars

Key Takeaways

all right so another component that bootstrap gives us is the navbar components now typically you're going to use these for the top of your website and put all of your links in it and also your site title or logo or something like that and again as with any bootstrap component there's loads of variations of the navbar you can change its color using the theme colors you can change its position to the bottom of the page if you wish you can make it fixed or sticky so it stays at the top of the page as you scroll down there's loads of ways you can use it it's also fully responsive out of the box you don't need to do anything else so that for smaller screens our links are placed into a drop down menu so let's try adding a navbar to our web page first of all so the nav bar is going to go at the top of the page right up here so in our code that's at the very top right here so what i'm going to do is create a nav and by the way i know i said in the last lecture everything is going to go inside a section well that's everything except for the nav that's just going to go inside a nav tag and this needs a navbar class like so all right then so inside the navbar i'm just going to say hello for now just so we can see this on the page you're not going to see much styling at the minute but if we inspect this and take a look at the navbar class right here we can see all of these different css properties applied to it so position relative display flex etc etc okay so now inside this i'm going to create a container because i don't want the nav bar to be full width i don't want it to go all the way across right here or rather i don't want the content inside the navbar to go all the way across i want it to start from over here like the content on the page so what i'm going to do is create a container to surround all the content inside the navbar so container and we'll say xx l so it's going to be 100 with until extra extra large screens and now if i say in here hello watch this if i come back over here we can see now it's scooted the navbar in a bit all right so inside this container what do we want to do well first of all i want the title of the website inside the navbar on the left now in bootstrap this is called the navbar brand and it could be some kind of text or it could be a logo so i'm going to do an anchor tag and then this is going to go to the intro section so if you click on whatever we put as the navbar brand it's just going to scoot you to the intro section and remember that was this so i'm also going to give this a class of navbar brand and then inside this anchor tag i'm going to do a span to surround our text because i want this span to have a couple of different classes itself and the first one is going to be font weight so that's going to be bold and then also the text is going to be the secondary color and that is kind of like the gray color so inside this span i'll just say net ninja pro the book all right so if i save this now we can see this over here this is the navbar brand the title inside the navbar okay so what else do we want inside the navbar well this is going to be a responsive navbar right and it's going to have on smaller screens a little logo over here like a berger nav that when we click it it's going to be a drop down so we need to apply that in the navigation as well so let's do that next so underneath the anchor tag i'm going to do a little comment and this is going to be the toggle button for mobile nav like so okay and under that we're going to create a button and this is going to have a class of navbar toggler now i'm not making these classes up again this is a bootstrap class for the toggler it does a specific thing that bootstrap controls and it needs this class all right so i'm going to say also the type is button and i'm also going to add a data hyphen bs which stands for bootstrap toggle and i'm going to set that equal to collapse all right so basically we're saying what this is going to toggle and later on we're going to toggle something with a class of collapse right so it knows it can make that connection now the next thing i'm going to do is just paste in a couple of things because instead of me typing everything out which takes longer i can just paste them in and explain them so the first one right here is another data attribute which is bootstrap target and this basically tells it which collapsible section we want to target now later on we're going to have a list of links and that's the thing that is going to have this id so it knows when you click on this button look for something with this id and that's the thing we're going to expand and close or collapse now when you're using bootstrap you're always going to see these kind of things aria controls or aria expanded these are for the benefit of screen readers and although you don't technically need to add these on it's recommended so that for things like screen readers that don't understand javascript and all this toggling and showing of contents they have these things they understand what this button does and what it opens and closes so it just allows the screen reader to know a little bit more about the structure of the web page so you're going to find these things on the documentation the aria controls says what this controls this button and the aria expanded means that currently what it controls is not expanded we also have an aria label which is what this is basically and it's to toggle the navigation all right so that's our button and bootstrap is going to style this automatically for us we don't have to do anything else but inside the button we have to add a span and that span is going to have a class of navbar hyphen toggler hyphen icon so this is the icon we actually click inside the button now if i save this and go to a small screen we should be able to nope we can't see it yet and i think that's because we don't have any navbar links defined so let's do those next now again i'm just going to paste this in so that you don't have to watch me type everything out and i'm just going to explain it line by line so we have a div surrounding all the links first of all and this div has a class of collapse so remember this is what the data bs toggle thing is equal to collapse so we know when we click on this we're invoking the collapse kind of functionality where it shows and hides something also we have a navbar collapse div that styles this div for us and implements that kind of collapsible uh functionality if you like we have justify content end and that means that everything's going to be scooted to the right when we drop down this button of links and also align center all right so we have an id right here of main nav and remember that's this target attribute as well so we know when we're clicking on this to look for this id this is what we're going to open and collapse now inside this div we have a ul with a class of navbar nav again for stylistic purposes bootstrap applies styles to these things this is all in the documentation and by the way a lot of the times what i do if i'm implementing some kind of new component is i go to the docs and i just type it in so navbar for example and it gives you all of these different code examples so i'll look at this and think well maybe i don't want that i'll scroll down don't want that don't want this then i'll find something i do want and i'll basically just copy this paste it into my text editor have a play around with it maybe try taking out some of the classes putting other classes in etc okay so if i save this at the minute then go over to the browser i still don't think it's gonna show and that's because we've missed out a class at the top right here of the navbar right so we need to say that this is going to be an expanded navbar so i'm going to say navbar expand and then from medium sized screens and up so what that means is when we're below medium sized screens we're going to show this toggle button and show the drop down when we get to medium-sized screens we're going to expand that into an actual navbar and now we can see all of these links up here right so all of these links we can see and when we get to a smaller size screen below medium we don't see those anymore but we also don't see the little button but we can see this hand right here if we hover over it we can see that and now we see the links right here but we don't see the button so that's because we've not given this basically a color theme so what i'm going to do is give this a navbar hyphen light and that makes it into a light kind of themed navbar and now we can see this and if we click it we can see all of those links and notice when we said navbar light as well it changed the link's color as well all right so let me just talk about these right here because they're inside this main nav we have this ul with a class of navbar nav and this contains basically all of the nav links now each one of these alloy tags has a class of nav item to style them and each of the anchor tags has a class of nav link again to style them and each one goes to a specific id and these ids are going to be the ids of the sections we use on this page all right so this last one right here is a little bit more complex we have the class of nav item we also have this class of ms hyphen 2. that's to give it a bit of margin to the start or the left and the strength is two we also say display none so that means on smaller screens display none and then on larger screens when it gets to medium size screens and up we display in line and the reason i'm doing this is because this is styled as a button now this and this they both go to the same place they both go to pricing but this one is a button and it's not shown on small screens this one is not a button and it is shown on small screen so it's just to show a different variation of the link on a small screen in comparison to the button style on a large screen so let me show you that in action on a large screen we see this on a small one we see this instead all right cool so that is our navbar pretty much done and again i know this might be confusing because there's lots of classes but again you don't remember all of these classes i'm not expecting you to go away and think crap how am i going to remember all of these classes to create a navbar that's not the point i'm just showing you that we can create these things pretty easily using classes and all you really have to do is go to the documentation like i said before search for a component find the kind of features you want in the different examples copy the code paste it into your text editor and then play around with the classes and that way you discover what these classes do and what kind of styles each one applies to the different elements on your page but anyway that is our navbar created next up we're going to work on the pricing section of our website below here and to do that we're going to be using the card component before we do that actually i just want to show you one or two things we can do to customize this navbar if we want to and the first one is to give it a different background color so i could use any of the theme colors and say bg hyphen primary for example and this is going to make it a bluey color in the background only now the text doesn't stand out as much so what we could do is we could say navbar dark instead and what that does is assume that the navbar background is pretty dark and it makes all the links and whatnot lighter so if i save this now we can see the links are a little lighter and we can see them easier we'd have to style this a bit better to make the text white as well instead of text secondary but that's how we can change the background now let's go back to napalite so it looks like this and also we can change it so the navbar is fixed at the bottom and to do that i can come over here and say fixed bottom and then save that and if we go back over here now we can see this is at the bottom and if we were to scroll down it would always remain at this position at the bottom of the screen we'd always see it anyway that's just a couple of different things we can do with the navbar but like i said next up we're going to take a look at the card component