[MUSIC] In this next exercise, we are going to include a navbar, the Bootstrap navbar, into our website, both on the Index HTML page and About Us HTML page so that you can easily navigate between these two pages. So that is one navigational aid that we're going to use within our website. We also will look at breadcrumbs, we will add breadcrumbs to our About Us HTML page so that we can indicate the hierarchy of our website.

As a first step, let's go to index.html page, and I'm going to paste in some code to include a navigation bar into our index.html page. After I paste in the code, I'll walk you through the code to explain to you what this navigation bar code does. As you expect, this code snippet is provided in the exercise instructions that follows this video.

Going into your index.html page, right after the body tag and before the header, I'm going to paste in the code corresponding to the navigation bar. Now, once I paste in the code, I'm going to save the code, and I'm going to go and take a look at what this navigation bar looks like on the web page. So let me save the changes, and then we'll go and look at the navigation bar. As you can see, on our web page, you can immediately notice the navigation bar at the top with the Home being highlighted there, and then you have the name of the restaurant up there, and then you have links to About, Menu, and Contact. So obviously, at this moment, these two pages don't exist, but the About page does exist. So if you click on the About page, you should go to the About Aztart HTML page. Let's look at the structure of the code, and see how this navigation bar is actually constructed. To help us understand the code that we have just pasted into our index.html, so I'm showing you, side by side, the web page in my browser and the corresponding code. So you can see that this code begins with the nav tag, so for a navigation bar by default I use the nav tag. You can also use the div tag if you want, but if you use the div tag, you should include an attribute called role equal to navigation for the div tag. If you use the nav tag, then that is not required in Bootstrap. So I choose to use the nav tag here, and the note that the nav tag is given a class as navbar, so this indicates that this is a navigation bar. So the class navbar in Bootstrap indicates the navigation bar. The second class that I apply is navbar-dark, so you can either apply navbar-light or navbar-dark. Navbar-light means that the background is expected to be light in color, so the text will be shown in dark color or black color on the screen so that the contrast is very clear. If you specify navbar-dark, then you are expecting that the background color will be a dark color so you expect the text to be white in color so that the contrast is very clearly visible on the screen, so that's the reason for using navbar-dark. Now, the color of the navbar background can be indicated directly by saying, for example, bg-primary. So this is a way to specify colors, the default colors, in Bootstrap. So the primary color in Bootstrap refers to this blue color, so it is automatically set up in Bootstrap to be that blue color. So as a starting point, I'm indicating to you how you could use the built-in colors of Bootstrap to automatically specify the color for the navbar. In the next step, I'm going to change that to a color that is more suitable for my website. So here, I specify bg-primary, indicating that the primary color, which is blue in Bootstrap, will be applied to the background for the navbar.

The next class is navbar-fixed-top, this specifies that this navbar essentially occupies the top of the screen, and it will be fixed in position at the top of the screen, and it won't move. The rest of the content of your page will move, but the navbar will always be visible and fixed at the top of the page. You can also have other options, say navbar-static-top, or don't specify that so that your navbar will also scroll when you scroll your page. So depending on how you want to implement your pitch, you can use one of those options for specifying how you want to create the page. So that is the first part, navbar-fixed-top. Now inside the navbar, you would notice that I have a div with the class container, so this I am using so that my navbar content itself is restricted to the container part of the page. So this is one where you can specify that even though your navbar is spanning the entire width of the screen, the navbar content itself is fixed within a certain region so that you would have enough margins on either side in your page. So that's why I put it inside a div that is enclosed inside the nav element here. Then you see this line called a, which is nothing but a hyperlink tag, with a class navbar-brand. So this navbar-brand class allows you to specify something in the a tag, which will be reflected in the top left corner here. So here, I specify href="#", and then I specify Ristorante Con Fusion inside the a tag, essentially saying this text will be reflected in this position. So this will act as a navigational aid, also to bring me back to the top level hierarchy of my page. So if I link this up to the index.html page in the remaining pages, then when I click on that, it'll bring me back to the home page. You can also replace that with an icon for your website, we're going to do that in one of the later exercise. Now, in addition, you will see various menu options here, various options in your navigation bar. So here, you can see that we have Home, About, Menu, and Contact here. Now this can be specified by using a list here. Now, I'm using a unsorted list here, you can also use a div, the only requirement is you specify the class to that appropriately. So here, the class that I'm specifying is nav, the nav indicates that it's a navigation element, and then it says navbar nav. So these are the two classes, Bootstrap classes, that I need to apply to this list, which specifies that this will be acting, whatever is inside here, will be acting as a nav bar Element here, so that is what is specified by this nav navbar.

And then after that, you'll see that each one of these, I am using the li tag, the list element tag, to specify each of these. For each list element tag, you need to use the class nav-item to specify that this is a navigation item here. So each list element, you specify the class nav-item. And one of them would be specified as the active class here. Meaning that, for example, you want to identify that you are currently at the Home page. So then if you set to that active, that means that you are currently at the Home page. Similarly, if you go to the About page, then for the list item corresponding to the About page, you will set that to active, rather than the Home page. And after this follows the link itself, so the link itself uses the a tag with the class nav-link here. And then the href specifies the link to the page. So notice that in this case, the second element here specifies a class nav-link, href is pointing to aboutus.html. So which means that if I click on this About link here, it'll take me to the About page. And then notice that I'm specifying

that the actual word that needs to be used in my navigational link here as About.

Similarly, the remaining two, the Menu and Contact being specified here. So now when I apply this navbar here, then my navbar becomes active. If I click on the About, I would be taken to the About page here. Now obviously I haven't yet included this navigation bar in the About page, but we're going to do that as part of the next step in our exercise. So that the About page will also contain the nav bar, and then you'll navigate back to the main page from here. One of the things that you'll immediately notice about this nav bar, when you go to an extra small screen size, as you see I've set it up to be a Galaxy S5 extra small screen size. Is that your navigation bar looks horrendous on extra small screen sizes. So obviously, this is not going to work very well for extra small screen sizes. So we want to make our navigation bar responsive. So the way we go for doing that is that for extra small screen sizes, we will collapse the navigation bar, so that you don't show it completely. Instead you will show it in a way that you will be able to only show a button there, which when clicked will open the navigation bar for you to use. So how do we go about doing that? So to do that, we'll go through the next two steps.

To make our navigation bar responsive, what we are going to do is to go to this container, to this navigation bar here. And right after the container, I'm going to paste in another

line here called as button. And then look at the classes that we are using, button class, navbar-toggler, hidden-sm-up. Note the use of hidden-sm-up here. So this means that this particular button will be hidden on screen sizes from small all the way up to extra large. So this button will be built visible only on extra small screen sizes. For the remaining ones, this button will be hidden.

And then the type is button, so this is a button type, and then note this attribute called as data-toggle which is set to collapse. We're going to look at how we make use of this in a short while. And then the next attribute saying data-target, Navbar, and then you close the button tag. So these two, data-toggle collapse and data-target Navbar Will become more clearer. Now, the collapse part of it, I'm going to explain later on when we look at JavaScript components. But for the moment, just hold on to that thought, and then we'll come back to that in one of the later exercises. So notice how we included a button here.

Now, what we want to do is, we want to show this button when you're viewing it on an extra small screen size. And then for the extra small screen size, we want to hide this navigation bar. And then when the button is clicked, you want to toggle the navigation bar, and show that. And when the button is clicked again, you want to hide that navigation bar. So in addition to adding the button, we're going to add some more code to this particular navigation bar here.

Right after the button, before this navbar-brand, add in a div here with the class, navbar-toggleable-xs, and the second class is collapse. And notice the id, which is Navbar.

This id Navbar ties into this data-target #Navbar. So this id, whatever id you use here should be specified as the data target for the button navbar. And then notice that this says data-toggle collapse and you're using this class as collapse here. And then the other cluster says, navbar-toggleable-xs, meaning that for extra small screen sizes, this div becomes a toggleable div. For small to extra large, this is not going to be a toggleable div. So this is the other class that we're going to use. Now we need to close this div here, so I'm going to close this div here. So this div closes the div that we just included. So with that, this ul and the navbar-brand link have been enclosed inside the toggleable class. So let me save the changes, and then we'll go and look at this

version of the navigation bar in our browser. Switching to our browser, you see that under extra small screen size, the navigation bar is now collapsed and replaced with this button here, with these three striped lines here. When you click on the button here, you notice how the navigation bar is revealed. And when you click on it, the navigation bar is hidden. Now this works much better on extra small screen sizes. But when you toggle to a small screen, size your navigation bar reappears. So, which means that for extra small screen sizes, this is a much better way of providing navigation for your website. And then you can click on and off the navigation bar. You might have seen some websites, when viewed using a mobile device, use this kind of approach for providing a toggleable navigation bar here. For small to extra large, the navigation bar is visible, just like before.

Now that my navigation bar works very well, In my index.html page, I'm going to simply copy this navigation bar code and paste it into my aboutus.html page so I will go to the aboutus.html page and then paste it about the header in the body of my aboutus.html page. But obviously, we need to fix up a few things in this navigation bar. First thing that we need to fix is that the navbar-brand should now lead me back to the home page. So this navbar-brand, the href, I'm going to change that to index.html because I want to go back to my homepage. Then the second change that I'm going to do is I'm going to remove the active class from the home because now the active class is

should be applied to the about page. So that's why I shift the active class to about page. Similarly, the href in the home link should be changed to index.html so that I can go back to my home page. And the other one you can change this from about us you can either leave it as such or change it to a hash there. With this change, you can save the changes. And then now, when you look at your website, you'll see that you'll be able to go between the main homepage and about page.

Going to the website in our browser, here, you see the website in extra large screen size. I'm going to now click on the about and then we will be taken to the About Us page.

So notice that we are in the About Us page and also note how the about is highlighted here. Now, if I click on the home page, I will be brought back to the home page. Okay, going back to the about page. If I click on the name of the restaurant, I will also be brought back to home page. So, this is how we fixed up the navigation brought in about that ask start html page. So, that it provides navigation back to the home page collectively. And from the home page, we will be able to navigate to the about page. And same thing if you view it on a extra small screen size. From home page, you can go to the about page, and then this, we are in the about page here, and in the about page, when you open that navigation bar. You see the about is highlighted. I can go back to the homepage just like before. So our navigation bar is now complete. Now I want to make a couple of changes to this navigation bar using CSS classes so that I can use a better background color for the navigation bar.

So to do that, what I'm going to do is to go to mystyle.css file and then add in some CSS classes.

Going to mystyle.css file, I'm going to add in a couple of more classes here. So notice that for the navbar-dark, I have set the background color to be different color here. So this would be a dark purple color so that the nav bar looks much better on my screen. And then the body of my page. I am adding in a 50 pixel padding at the top for the body of my picture. Now, this is so that the way our page is now implemented, the navbar covers the top 50 pixels of my page. And my Jumbotron is partly hidden underneath the nav bar. So if I'm giving up a 50 pixel margin or padding at the top, then my jumbotron will be lower so that it doesn't get hidden underneath the nav bar. So that's why I added a 50 pixel padding at the top for my body tag here. So with these changes, I'm going to save the changes.

We go back to our web page and we still see that this is blue in color, but notice how my jumbotron has been lowered a little bit here. And then it scrolls underneath the navigation bar cleanly and note how the navigation bar remains fix at the top. Now to change the color of this because we have already applied the background color to nav bar dark. I need to remove the bg hyphen primary from my nav bars descriptions. So switching back to my code going to index.html page. I will remove that bg-primary from my nav element there. Similarly, go to aboutus.html page and then remove the bg-primary from the navbar element, and save. And then, now switching back to the browser.

You'll now notice that your nav bar stands out clearly in a dark purple on top of your webpage.

Does this look much more satisfying to you?

By all means play around with you colors until you get it right to suit your test. Now, this is what I'm going to use in my web page.

In my next step, I'm going to add in bread crumbs to my aboutus.html page. So going to my aboutus.html page in this page in the row just above the About Us Here, I'm going to add in the code to put the bread crumbs into place. Boot strap provides this bread crumbs plus which allows me to add to breadcrumbs to my site. Look at how the breadcrumbs class is added. So I am using an ol here. You can use a ul or an ol, or you can simply use a dill folder. It doesn't really matter what you use there.

But once you add this in. Let me save the changes and then we'll have a look at what the breadcrumb looks like in our webpage. And we'll come back and review the code here. I'm showing you the webpage and the code side by side so you can now see how the breadcrumb has been included in the webpage, so you can see that you have a Home link here and / About Us. This is Bootstrap's way of defining a breadcrumb to be included in your webpage. So this separates it from the current page, so this would be the current page, and this would be the higher link in the hierarchy. So this is how Bootstrap specifies the breadcrumb key, now you can obviously add more to the breadcrumb. You can add more color to the background and. Those things can easily be done by customizing that in your style.css file. But looking at this a bit more closely, you'll see that this specifies ol and the class. Note the class, col-xs-12. So this stretches the entire width of the row. And then the other class that is applied is breadcrumb. So anything that you declare as a breadcrumb, will contain the breadcrumb. Now inside the breadcrumb, you will have individual items indicated as breadcrumb item here. Since this is an ol, I'm using a list tag here to indicate the breadcrumb. So first one, it says, list class="breadcrumb-item", a is equal to href="index.html". So this is pointing to the homepage so and then Home, and then closing a tag and then closing list tag. So this is how this Home in the breadcrumb specifically. Then the next one it says, list class="breadcrumb-item", but note, that I am applying an active class to this. When I apply an active class to the breadcrumb, that indicates the dot is the current location. So that's why this is not treated as a link but instead, indicated by just showing it has text there. And then About Us there. And I don't need to provide any link to the About Us there. So that is how a breadcrumb can become constructed in our webpage. So if you have more pages in the hierarchy, you can add more breadcrumbs like this. So this list of breadcrumb item can be repeated multiple times. So you could have home/something/something/ and so on, to construct a more, longer list of items in our breadcrumb. So that is the simple modification that we need to

include a breadcrumb in our website. Now that we have completed all the steps of the exercise,

good point to do a Git commit. So you see that I have made changes to styles.css, index.html, and aboutus.html. And I'm going to commit this as with the message,

Bootstrap Navbar. And then commit that to my Git Repository.

This completes this exercise. In this exercise, we saw the use of a Bootstrap Navbar and Bootstrap Breadcrumbs in our webpage. [MUSIC]

Exercise (Video): Navbar and Breadcrumbs

Front-End Web UI Frameworks and Tools: Bootstrap 4

Meet the Instructors