Responsive Navbar with Bootstrap 4

hey guys what's going on it's clever techie and in this video we're gonna learn how to create a responsive navigation bar using bootstrap for now what I realize is there's a lot of bootstrap class names to remember and we also need to know which HTML tags to apply them to so I decided to create this cheat sheet where in the first column you can see all the HTML tags colored in green and in the second column you can see all the bootstrap classes colored in blue so that way you can immediately know which booster class belongs to which HTML element there are also HTML attribute names which I colored in yellow and finally attribute values are in gray I also use indent spacing to make it clear that these attributes belong to their respective HTML tags so I'm gonna keep referencing this cheat sheet throughout this video and you guys will see that it helps a lot in the process of creating our navbar all right so I've created this basic workspace so we can get started working on our navbar and one thing to know before we get started is you have to include the jQuery file before bootstrap files in order for the collapse and drop down functionality to work so make sure you include a jQuery file before bootstrap CSS and bootstrap JavaScript I've also included a custom CSS where I'm importing montserrat font from Google and I'm simply applying it to the body ok so let's go ahead and create the basic responsive navbar first so by looking at our cheat sheet you can see that the basic navbar consists of four HTML elements and five bootstrap classes so let's go ahead and create the first HTML element with these to bootstrap classes ok so nav class equals navbar navbar expand I'm gonna go ahead and use MD to collapse the navbar at medium screen sizes the next HTML element is UL with a class named nav bar - nav the next one is list item and then we're gonna have a a with an F - link inside of a list item so let's go ahead and create those two next a plus equals nav - link I'm also gonna add a H ref with a pound so the link is clickable I'm gonna put link 1 and now I'm just gonna copy this multiple times name this link two three and four and that's it for our basic navbar let's go ahead and view it in the browser and that's our responsive navbar if I drag the window you can see that it's collapsing at the medium screen size now let's play around with appearance a little bit as you can see the first four classes in the appearance tab belong to nav HTML tag the nav bar dark goes well with BG dark and then bar light goes well with BG light so let's go ahead and see what they look like so first I'm gonna apply navbar light and BG light and that will create a light navbar now let's change that to navbar dark and BG dark and now we'll create a dark navbar and you can also apply all the BG colors like primary success BG warning BG info and BG danger so let's go ahead and add BG primary for example view it in a browser and you can see that now our nav bar is blue you can also apply any of the other ones let's say danger and that will make our navbar red I'm gonna go ahead and change it back to dark and so you can go ahead and experiment with all of these all of these work on the navbar HTML tag okay now we're gonna go ahead and add some text and logger to our nav bar okay so for the text and logo we're simply gonna add the span and a HTML tags with NAB our text and then barb Brian classes okay we're gonna do this inside of our nav HTML tag so the first one I'm gonna add is span class equals nav bar text put some text in there and the second one I'm gonna add is a class equals nav bar brand and inside of this a class I'm gonna add IMG SRC equals clever gear dot PNG which is a clever techy logo close this one and now we can see what it looks like in a browser and you can see that it added the text with a collaborative logo and that's how easy it is to add text and logo to our member okay before we apply position classes to our net bar let's go ahead and create a header on top of our nav bar this is so it can properly demonstrate the sticky top class so on top of our nav bar here I'm gonna go ahead and add a new div with a bootstrap class named Jumbotron and I'm gonna go ahead and apply custom styling to it to remove the bottom margin so margin bottom 0px I'm also gonna go ahead and add some content inside of the header add a paragraph as well with something like let's learn web development close this tag now let's see what it looks like in a browser refresh the page and now you can see that added a huge header on top of our net bar with a header and a paragraph now in order to scroll past this navbar we also have to add some content at the bottom of than that bar so we can properly see sticky top in action so let's go ahead and add that image in the bottom of our net bar so I'm gonna say IMG SRC equals bootstrap for navbar cheat sheet dot PNG and I'm also gonna go ahead and add a class named IMG - fluid to make this image responsive now let's see what it looks like and now we can start adding our position classes to see how our navbar behaves so let's go ahead and do that right now let's do the fix - top first now as you can see this fixed the navbar at the top of the page and it also overlaid the header now let's do the fixed bottom and displaced our nav bar at the bottom of the screen and finally sticky top if we scroll past the nav bar here you can see that it starts to stick at the top of the page so that's the functionality of the sticky top and that's it for the position of our net bar let's move on to the collapse okay so to add the collapse functionality to our nav bar we're gonna go ahead and add a button with two attributes the data toggle and data target the data toggle is gonna have a collapsed value and data target is gonna have a name of our target that we collapsing we're also gonna add a span class inside of our button tag for the navbar toggler icon then we're gonna go ahead and wrap our navbar links in a div with the same ID as the target name in a toddler and we're also gonna add a class called navbar collapse to that same div the reason for adding this functionality is to let the user manually decide when they want to expand or collapse in that bar bootstrap is going to hide our nav bar links at a breaking point and show the toddler button instead allowing us to collapse and expand in that bar by clicking on the button okay so inside of our nav tag let's go ahead and create the button first with a class navbar Cutler it's also gonna have two attributes data toggle with a valley collapse and data target with our target name so data toggle eCos collapse and data target the target name can be anything I'm gonna go ahead and name it collapse underscore target also gonna add the span tag inside of the button to add that toggler icon so a span tag with a navbar toggler icon class and our button is radio let's see what it looks like in a browser I'm gonna go ahead and reduce the window size until it collapses and now you can see the buttons showing up here now all we have to do is wrap our links inside of the div tag to make them collapsible okay so we're gonna have to wrap the content which we want to collapse in a div tag including the text and the logo so let's go ahead and create a new div here and the class of this div is going to be collapse and navbar collapse we're also gonna add an attribute name ID where the same target name as data target so collapse and navbar collapse first collapse in that bar collapse and the attribute name is once again ID where the target name collapse underscore target and make sure that for the data target you actually include the pound here otherwise it's not going to work so I'm gonna go ahead and fix that here and we're gonna go ahead and close our our div down here at the bottom of the UL tag now let's go ahead and see if this works I'm gonna go ahead and reduce the window size and now you can see that in fact reduced it collapsed in that bar and if I click on it it's going to go ahead and expand in that bar and that's it that's we now have a responsive navbar with a custom collapse button the last thing we're gonna do is add drop-down menu to one of our navigation links so for the drop down menu it's actually very similar to what we just did to the collapse we're first going to identify the area which is going to collapse or expand our menu and then we're gonna create the actual menu itself so for the list item here we're gonna add a class named drop-down so I'm gonna use this on our first list item I'm just gonna say drop-down and then for the a we're gonna add drop-down toggle class and also we're gonna have to add two attributes down a toggle with a value drop-down and ID with our target name so we've got a toggle eCos drop-down dot a target equals and once again the data target can be any name we're gonna name it drop-down underscore target okay so I'm gonna go ahead and rename this link one here to drop-down and I'm also gonna go ahead and add if span here with a class named Carrick and this is not on the cheat sheet but this one is really easy to remember and all it does is it adds the arrow next to the link so let's see what it looks like and this is our drop-down menu with a caret next to it now let's go ahead and create the actual drop-down menu next alright so the next thing we're gonna do is add the actual drop-down menu content itself and you want to make sure that you're still inside the list item of the link that we're gonna be clicking to expand and collapse sar menu so I'm gonna go ahead and add the div inside of our list item here or the class name drop-down menu and it's also going to have an attribute name re a label by with our target name and the target name is of course drop-down target okay so the last thing we're gonna add is actual links inside of our job down menu and of course the links are created with a tag with a class name drop-down item so a class equals drop-down item I'm gonna name the first link PHP videos and then I'm just gonna copy this whole thing name this one CSS videos and bootstrap videos I'm also gonna go ahead and add that divider between the list items just to see its functionality so a div with a class name drop down divider okay now let's see what it looks like in a browser refresh the page click on our drop down menu and now we have our menu showing up now if you guys want to make this job down mania horizontal instead of vertical we can simply wrap these links inside a UL HTML tag with a class name navbar - nav and this will make our drop-down menu horizontal so let's go ahead and do that right now so UL plus equals navbar - nav close the UL tag here refresh the page and now we have a horizontal menu and if I reduce the size of this window it's gonna collapse and then click on this button I can also expand our drop down menu here and you can see that everything is working and that's our responsive navbar with bootstrap for you guys might download the cheat sheet in the description of this video and if you like this video please like share and subscribe clever techie out

Channel: Clever Techie

Views: 301,213

Keywords: responsive navbar, responsive navigation bar, responsive navbar using bootstrap, responsive navigation bar using bootstrap, responsive navbar bootstrap 4, boostrap 4 navigation bar

Id: L0uNai3XyKQ

Length: 15min 38sec (938 seconds)

Published: Tue Jan 16 2018