Bootstrap 4 Navbar Concepts | BOOTSTRAP 4 TUTORIAL

welcome to this video great to have you on board in this video we'll add a navigation bar to our page so that we can get started building a real page and what better way to get started than by adding a responsive navigation bar of course using bootstrap for so I'm back in the project as I left it at the end of the last video and there we just played around with the grid so therefore what I can do here is I can get rid of all these style assignments in the head section and actually get rid of the entire body content because that was just the dummy grid I'll now also add a main dot CSS file which I'll used to store my CSS code for the future and I'll import it with a link element in the index.html file pointing to main dot CSS okay so this is how I wanna work with CSS now I don't actually to write that much CSS code though in this video my goal is to add a navbar now since we cleaned up that body content our web page if we reload it essentially looks like this so let's add a navigation bar now by adding a nav element now this is the default HTML nav element and here's one important thing just as in all the other cases bootstrap pretty much only works with CSS classes it doesn't automatically turn this into a nicely styled bootstrap navigation bar because there might be cases where you want to use that element without getting the bootstrap navigation bar hence to turn this into your navigation bar controlled and start by bootstrap I have to add a class the navbar class like this now if we save that and we reload the page we still don't really see that much do we well the reason for this is of course we need to add some content so inside of that navbar why don't we add an anchor tag which leads nowhere in our case well we have our brand let's say so in my case a catamite and this could also be an image now I will give this anchor tag a special class and that class should be navbar - brand which will make sure that this is stalled and positioned in a nice way in the top left corner of the navigation bar which is where you typically have your clickable brand which leads you back to your home page on most pages if we add this and we reload we see that brand here but I don't really see a navigation bar do you well we need to add more classes to the nav element there we should also add nav bar light to set the theme and BG alight for the background theme if we add that and we reload now the Sun we got a nice grey nav bar spanning the full width of the page and you see the brand style all the was adjusted it's still clickable but it looks less like a link which is of course what we want so this is now our better-looking nav bar now you want to have more than just a brand in the nav bar you want to have some clickable items so for dad what we can do is we can add an unordered list in that nav bar and give that unordered list a class of nav bar - Neff to indicate that this holds our actual menu items there we can add a menu item by adding a list item of course with a link inside of it maybe our users page and that list item and turn also receives a class didn't have - item class now we can also give that link a class and that will be the nav link class so this is the structure we typically set up for navigation items or for menu items in the navigation bar we have the nav bar nav wrapper around all the list items then the individual list item and in that list item we typically got a link which then also should get in F link class here now if we do that and we save this if we reload the page we can see the link here nicely positioned on the right side of the navigation bar so this is automatically done for you by bootstrap now you can change the positioning by going to that unordered list with the class Neff porn F and adding M R Auto margin-right:auto if you do that it'll actually be positioned on the Left instead of on the right since bootstrap uses flexbox this automatically leads to that position we can inspect this if we have a look at this unordered list you see that with margin right set to auto it actually fills up all the entire space with this wealth margin to the right and hence this unordered list with all its list items is pushed all the way to the left if you remove that rule which you do by removing mmm our auto it actually is positioned across the entire navbar because dad on the other hand is just how the navbar works it uses display flex and then it also positions its elements with space between so mr Auto is a nice way of moving the elements to the left if you want that I will remove that though because I don't want that behavior I want to have this space in between and with that let's dive deeper let's add more or less items for example we can add a second list item which could be products something like that if we now say if this hmm this actually adds a new line instead of adding this next to the our list item now why is that the response can be found if we inspect the unordered list with the navbar nav class there we see that the Flex Direction is actually set to call him instead of Road now this is not a balk this is on purpose because bootstrap four is built in a mobile-first way now because of that mobile-first approach we can also build our navigation bar in a mobile-first way we do that by adding a div with the class collapse nav bar - collapse and this route if will actually wrap this unordered list now with that if we save dad and we reload this is gone we don't see the nav items anymore this is because we now need to tell bootstrap how long or from which point on we actually want to render our menu items in the nav bar instead of in a toggle drop-down menu so to say we do this by adding a nav bar - expand class to the nav element and then you set a break point of finding from which point on shoot elements be added to the navbar this could be LG to only add them on big screens for example with that if you reload if you increase the size you add them on bigger screens and now you see they are also added on the left here instead of on the right now this just happens to be the default you can go to nap or Neph and where we used em our audio previously to push it to the to the left we can now use ml order to add some margin to the left automatically to the list items to move them back to the right if we want a dead behavior so I will go back to the very default though so that you can also recognize this code in the official documentation if you look it up there and so now we're back to a navigation bar where items are removed once we go below a certain size and of course we can change that breakpoint we could set it to SM for example and now the menu items will be there much longer they will only disappear on small devices now the question of course is how do we bring them back for small devices then they disappear because maybe we're running out of space in the navigation bar but where do we then display them well in some extra menu which can be toggled the problem chest is we got no toggle button well we can add this to with the nav bar boots Tripp offers us to add such a toggle button we can add it here after the friend you could also in front of it add a button and give it a class of navbar toggler because that is what this button will do in the end now on this button you don't write anything but in there you simply add a span which in turn should get a class of navbar toggler icon this will give you the hamburger menu in the end now if we save that and we reload now we get that toggle button here and for bigger screens if we increase that this will be removed and we get the menu items instead that's cool but clicking a button doesn't do anything this has two reasons the first reason is that we need to add something to that button to make it work and that is the data - toggle property or attribute I should say which we set to collapse now this will be used by bootstraps JavaScript package it will automatically listen to clicks on a button then and it will open the menu for us and close it if it's open all of that done automatically the problem is even with that change if we reload nothing happens the reason for that is very simple though we haven't included the bootstrap script packages so let's head over to get bootstrap comm and click on get started and previously I only fetch the CSS portion let's now also fetch these free scripts that includes jQuery yeah bootstrap still uses jQuery on which it builds up however in a very slim version so it's probably fine for that and now we're a helper library and the bootstrap JavaScript code itself which in the end will do that click listening I was talking about we can put that code at the end of our body section to load it last and with that if we now reload the page we can click that button and still don't see anything well there's one more missing piece we added that data toggle which is great this will actually lead to a listener being set up but we also need to define a data - target attribute which points at the element the menu we want a toggle because there is something you can configure there you choose a CSS selector recommended is using an ID for example the nav bar menu the name is totally up to you the important thing is you now just need to assign this as an ID to your collapsible menu and with that I'm referring to that diff which wraps the menu so this div now receives an ID which has to fit that data target you to find up here navbar menu in my case here and with that added we can save this and now if we reload the page we can indeed toggle our menu here this is how we can add a very basic navbar now below the video you'll find a link to the official talks where you can dive much deeper and also learn how you can include a search bar into your naff and so on one thing that I want to show you right away is how you can set different schemes color schemes for this navbar right now we're using the light scheme here with nav bar light and BG light and we can change this for example to navbar whip-snap bar dark and BG dark if we do that we got a dark navbar and you see the text and the menu button automatically adjusts so this is pretty cool and this allows you to quickly add a navigation bar with basic features to your page now I hope that these basic explanations were helpful especially regarding the responsiveness and how you can move menu items around position them to the right to the left definitely dive into the official Docs if you want to learn more about it and hopefully see you in a future video tube bye

Channel: Academind

Views: 302,897

Rating: 4.9278312 out of 5

Keywords: bootstrap4, bootstrap 4, navbar, responsive navbar, adding a navbar, responsive navigation, navigation, bootstrap tutorial, bootstrap course

Id: 23bpce-5s8I

Length: 12min 29sec (749 seconds)

Published: Mon Mar 05 2018