Coding

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