Bootstrap 4 Navbar Concepts | BOOTSTRAP 4 TUTORIAL

00:00:02 welcome to this video great to have you
00:00:04 on board in this video we'll add a
00:00:06 navigation bar to our page so that we
00:00:09 can get started building a real page and
00:00:11 what better way to get started than by
00:00:14 adding a responsive navigation bar of
00:00:17 course using bootstrap for
00:00:21 so I'm back in the project as I left it
00:00:24 at the end of the last video and there
00:00:26 we just played around with the grid
00:00:28 so therefore what I can do here is I can
00:00:31 get rid of all these style assignments
00:00:33 in the head section and actually get rid
00:00:35 of the entire body content because that
00:00:38 was just the dummy grid I'll now also
00:00:40 add a main dot CSS file which I'll used
00:00:43 to store my CSS code for the future and
00:00:46 I'll import it with a link element in
00:00:49 the index.html file pointing to main dot
00:00:52 CSS okay so this is how I wanna work
00:00:56 with CSS now I don't actually to write
00:00:59 that much CSS code though in this video
00:01:02 my goal is to add a navbar now since we
00:01:04 cleaned up that body content our web
00:01:07 page if we reload it essentially looks
00:01:09 like this so let's add a navigation bar
00:01:12 now by adding a nav element now this is
00:01:16 the default HTML nav element and here's
00:01:19 one important thing just as in all the
00:01:21 other cases bootstrap pretty much only
00:01:24 works with CSS classes it doesn't
00:01:27 automatically turn this into a nicely
00:01:30 styled bootstrap navigation bar because
00:01:33 there might be cases where you want to
00:01:34 use that element without getting the
00:01:36 bootstrap navigation bar hence to turn
00:01:39 this into your navigation bar controlled
00:01:41 and start by bootstrap I have to add a
00:01:44 class the navbar class like this now if
00:01:48 we save that and we reload the page we
00:01:53 still don't really see that much do we
00:01:54 well the reason for this is of course we
00:01:57 need to add some content so inside of
00:02:00 that navbar why don't we add an anchor
00:02:04 tag which leads nowhere in our case well
00:02:07 we have our brand let's say so in my
00:02:10 case a catamite and this could also be
00:02:12 an image now I will give this anchor tag
00:02:15 a special class and that class should be
00:02:17 navbar – brand which will make sure that
00:02:22 this is stalled and positioned in a nice
00:02:23 way in the top left corner of the
00:02:26 navigation bar which is where you
00:02:27 typically have your clickable brand
00:02:29 which leads you back to your home page
00:02:31 on most pages if we add this and we
00:02:34 reload
00:02:35 we see that brand here but I don't
00:02:38 really see a navigation bar do you well
00:02:41 we need to add more classes to the nav
00:02:44 element there we should also add nav bar
00:02:48 light to set the theme and BG alight for
00:02:51 the background theme if we add that and
00:02:54 we reload now the Sun we got a nice grey
00:02:57 nav bar spanning the full width of the
00:03:00 page and you see the brand style all the
00:03:03 was adjusted it's still clickable but it
00:03:06 looks less like a link which is of
00:03:08 course what we want so this is now our
00:03:12 better-looking nav bar now you want to
00:03:15 have more than just a brand in the nav
00:03:17 bar you want to have some clickable
00:03:18 items so for dad what we can do is we
00:03:22 can add an unordered list in that nav
00:03:25 bar and give that unordered list a class
00:03:28 of nav bar – Neff to indicate that this
00:03:31 holds our actual menu items there we can
00:03:36 add a menu item by adding a list item of
00:03:38 course with a link inside of it
00:03:40 maybe our users page and that list item
00:03:44 and turn also receives a class didn't
00:03:47 have – item class now we can also give
00:03:51 that link a class and that will be the
00:03:54 nav link class so this is the structure
00:03:57 we typically set up for navigation items
00:03:59 or for menu items in the navigation bar
00:04:02 we have the nav bar nav wrapper around
00:04:05 all the list items then the individual
00:04:08 list item and in that list item we
00:04:10 typically got a link which then also
00:04:12 should get in F link class here now if
00:04:16 we do that and we save this if we reload
00:04:18 the page we can see the link here nicely
00:04:21 positioned on the right side of the
00:04:24 navigation bar so this is automatically
00:04:26 done for you by bootstrap now you can
00:04:29 change the positioning by going to that
00:04:32 unordered list with the class Neff porn
00:04:35 F and adding M R Auto margin-right:auto

00:04:38 if you do that it'll actually be
00:04:41 positioned on the Left instead of on the
00:04:43 right since bootstrap uses flexbox this
00:04:47 automatically leads to that position
00:04:49 we can inspect this if we have a look at
00:04:51 this unordered list you see that with
00:04:53 margin right set to auto it actually
00:04:56 fills up all the entire space with this
00:04:58 wealth margin to the right and hence
00:05:00 this unordered list with all its list
00:05:03 items is pushed all the way to the left
00:05:05 if you remove that rule which you do by
00:05:08 removing mmm our auto it actually is
00:05:10 positioned across the entire navbar
00:05:13 because dad on the other hand is just
00:05:15 how the navbar works it uses display
00:05:17 flex and then it also positions its
00:05:20 elements with space between so mr Auto
00:05:24 is a nice way of moving the elements to
00:05:27 the left if you want that I will remove
00:05:29 that though because I don't want that
00:05:31 behavior I want to have this space in
00:05:33 between and with that let's dive deeper
00:05:35 let's add more or less items for example
00:05:38 we can add a second list item which
00:05:41 could be products something like that if
00:05:45 we now say if this hmm
00:05:47 this actually adds a new line instead of
00:05:51 adding this next to the our list item
00:05:53 now why is that the response can be
00:05:56 found if we inspect the unordered list
00:05:59 with the navbar nav class there we see
00:06:02 that the Flex Direction is actually set
00:06:05 to call him instead of Road now this is
00:06:08 not a balk this is on purpose because
00:06:09 bootstrap four is built in a
00:06:11 mobile-first way now because of that
00:06:14 mobile-first approach we can also build
00:06:16 our navigation bar in a mobile-first way
00:06:18 we do that by adding a div with the
00:06:21 class collapse nav bar – collapse and
00:06:28 this route if will actually wrap this
00:06:32 unordered list now with that if we save
00:06:34 dad and we reload this is gone we don't
00:06:37 see the nav items anymore this is
00:06:40 because we now need to tell bootstrap
00:06:42 how long or from which point on we
00:06:45 actually want to render our menu items
00:06:48 in the nav bar instead of in a toggle
00:06:52 drop-down menu so to say we do this by
00:06:55 adding a nav bar – expand class to the
00:06:58 nav element and then you set a break
00:07:01 point of finding from which
00:07:03 point on shoot elements be added to the
00:07:05 navbar this could be LG to only add them
00:07:08 on big screens for example with that if
00:07:10 you reload if you increase the size you
00:07:13 add them on bigger screens and now you
00:07:15 see they are also added on the left here
00:07:18 instead of on the right now this just
00:07:20 happens to be the default you can go to
00:07:22 nap or Neph and where we used em our
00:07:24 audio previously to push it to the to
00:07:29 the left we can now use ml order to add
00:07:31 some margin to the left automatically to
00:07:34 the list items to move them back to the
00:07:36 right if we want a dead behavior so I
00:07:39 will go back to the very default though
00:07:42 so that you can also recognize this code
00:07:44 in the official documentation if you
00:07:46 look it up there and so now we're back
00:07:49 to a navigation bar where items are
00:07:51 removed once we go below a certain size
00:07:54 and of course we can change that
00:07:56 breakpoint we could set it to SM for
00:07:58 example and now the menu items will be
00:08:01 there much longer
00:08:02 they will only disappear on small
00:08:03 devices now the question of course is
00:08:05 how do we bring them back for small
00:08:08 devices then they disappear because
00:08:10 maybe we're running out of space in the
00:08:12 navigation bar but where do we then
00:08:14 display them well in some extra menu
00:08:17 which can be toggled the problem chest
00:08:19 is we got no toggle button well we can
00:08:22 add this to with the nav bar boots Tripp
00:08:25 offers us to add such a toggle button we
00:08:28 can add it here after the friend
00:08:30 you could also in front of it add a
00:08:32 button and give it a class of navbar
00:08:37 toggler because that is what this button
00:08:39 will do in the end now on this button
00:08:42 you don't write anything but in there
00:08:45 you simply add a span which in turn
00:08:47 should get a class of navbar toggler
00:08:50 icon this will give you the hamburger
00:08:52 menu in the end now if we save that and
00:08:56 we reload now we get that toggle button
00:08:59 here and for bigger screens if we

00:09:01 increase that this will be removed and
00:09:03 we get the menu items instead that's
00:09:05 cool but clicking a button doesn't do
00:09:07 anything this has two reasons the first
00:09:10 reason is that we need to add something
00:09:12 to that button to make it work and that
00:09:14 is the data
00:09:16 – toggle property or attribute I should
00:09:20 say which we set to collapse now this
00:09:22 will be used by bootstraps JavaScript
00:09:24 package it will automatically listen to
00:09:26 clicks on a button then and it will open
00:09:28 the menu for us and close it if it's
00:09:31 open all of that done automatically the
00:09:35 problem is even with that change if we
00:09:38 reload nothing happens the reason for
00:09:40 that is very simple though we haven't
00:09:42 included the bootstrap script packages
00:09:44 so let's head over to get bootstrap comm
00:09:47 and click on get started and previously
00:09:49 I only fetch the CSS portion let's now
00:09:52 also fetch these free scripts that
00:09:54 includes jQuery yeah bootstrap still
00:09:57 uses jQuery on which it builds up
00:10:00 however in a very slim version so it's
00:10:02 probably fine for that and now we're a
00:10:04 helper library and the bootstrap
00:10:06 JavaScript code itself which in the end
00:10:08 will do that click listening I was
00:10:10 talking about we can put that code at
00:10:13 the end of our body section to load it
00:10:16 last and with that if we now reload the
00:10:19 page we can click that button and still
00:10:22 don't see anything well there's one more
00:10:25 missing piece we added that data toggle
00:10:28 which is great this will actually lead
00:10:30 to a listener being set up but we also
00:10:32 need to define a data – target attribute
00:10:36 which points at the element the menu we
00:10:40 want a toggle because there is something
00:10:42 you can configure there you choose a CSS
00:10:46 selector recommended is using an ID for
00:10:49 example the nav bar menu the name is
00:10:53 totally up to you the important thing is
00:10:55 you now just need to assign this as an
00:10:58 ID to your collapsible menu and with
00:11:01 that I'm referring to that diff which
00:11:03 wraps the menu so this div now receives
00:11:06 an ID which has to fit that data target
00:11:09 you to find up here navbar menu in my
00:11:11 case here and with that added we can
00:11:14 save this and now if we reload the page
00:11:17 we can indeed toggle our menu here this
00:11:21 is how we can add a very basic navbar
00:11:23 now below the video you'll find a link
00:11:25 to the official talks where you can dive
00:11:27 much deeper and also learn how you
00:11:29 can include a search bar into your naff
00:11:31 and so on one thing that I want to show
00:11:34 you right away is how you can set
00:11:36 different schemes color schemes for this
00:11:39 navbar right now we're using the light
00:11:42 scheme here with nav bar light and BG
00:11:44 light and we can change this for example
00:11:47 to navbar whip-snap bar dark and BG dark
00:11:52 if we do that we got a dark navbar and
00:11:55 you see the text and the menu button
00:11:58 automatically adjusts so this is pretty
00:12:00 cool and this allows you to quickly add
00:12:02 a navigation bar with basic features to
00:12:06 your page now I hope that these basic
00:12:09 explanations were helpful especially
00:12:12 regarding the responsiveness and how you
00:12:14 can move menu items around position them
00:12:17 to the right to the left
00:12:18 definitely dive into the official Docs
00:12:20 if you want to learn more about it and
00:12:23 hopefully see you in a future video tube
00:12:25 bye

You may also like