So now that we've designed our wireframes and we're happy with the layout and the structure of our website,
then it's time to turn this design into the real thing and through building this website.
I'm going to show you all of the cool features of bootstrap and how you can customize it and change
it to your needs.
So in the coming lessons, we're going to be recreating this entire page and its design using bootstrap.
So the first thing I want to tackle is this navigation bar up here.
So I want to put in a nav bar at the top where we have links to the different sections of our website
so that for example, if I clicked on a company or something, it would scroll down to that section
where it's relevant to.
And this is usually the navigation that you see in these single page landing pages.
And in order to put in that navigation bar, we're going to be using Bootstrap now because bootstrap
is a library, which means that it contains reusable bits of code that we want to put into our project.
Now, sometimes with libraries, you might have written them yourself.
So for example, if you particularly liked a button that you created in CSF, then you might want to
reuse that bit of code by putting it into a separate file and dropping it into your project when you
want to use it.
Now, because this library is created by a third party, so it's somebody that we don't know.
It was originally made by the team at Twitter, but since then it's had a large number of contributors,
and you can actually take a look at their core team, as well as how many people contributed to this
library.
But the point is that in order to use this library that somebody else created, then we need to look
at the documentation and we need to see what are the guidelines and what are the rules that we need
to know about in order to use their components and their features.
So the first thing we're going to do is head over to documentation and we're going to go over to components
and you're going to navigate to NAV Bar.
And this is what we're going to add into our website, something that looks similar to this and we're
first going to create it and test it out in a code play playground.
So I'm going to create a brand new one.
Now inside HTML5, there is a element called the nav element.
And this is kind of similar to a div, but semantically it's more clear what it is that you're creating
and what it is that this section of code does.
So that means if somebody else comes along and they see the nav section with the nav element, then
they're going to know this is probably going to be the code that's related to the navigation bar.
So if I run it right now, you'll see that nothing happens because similar to a div, if the nav doesn't
have any content, it doesn't have any dimensions.
So let's change that.
Let's create a new unordered list inside which we're going to have a single list item, and this list
item is going to be one of our menu icons.
So maybe we'll want a contact link inside our navigation bar.
So now if I run the code, you can see I've just got a single bullet point that says contact, and this
looks nothing like a navigation bar yet.
So we can start using the bootstrap classes and we're going to add those classes to our nav element,
just as they've shown here in their documentation.
So the first one that we're going to add is the nav bar.
And if we have a look inside that bootstrap access file that we downloaded earlier and let's search
for nav bar, then you can see that by adding that class, then we include all of these CSC rules and
apply it to this navigation element.
And you can see what it does is that it changes the position to relative.
It makes the content justified.
It adds a little bit of padding and also add some alignment and further positioning rules.
Now, in addition to that, we're going to apply some other styles to the other elements inside our
code.
So we're going to change the UFL to have a class of nav bar, dash nav, and the L.I is going to have
a class of nav dash item.
And you can see that this is all from the documentation here, where you can see that you'll have that
class nav bar nav and the ally has the class nav item.
And you can also check over here in the actual source code to see what applying each of these styles
actually does.
And now that we've done that, let's go ahead and hit run, and we can see that we've now got a completely
different style based on those three different classes that we just added.
Now the text in on NAV Bar is probably going to be a link, right?
We want to be able to click on it and to scroll to a particular section in our website, for example,
contact.
Maybe we'll go down to the bottom where we've got icons for Twitter, Facebook, email, et cetera.
So this can't just be plain text, and instead we should change it into an anchor tag.
So let's create an anchor tag that has the class of NAV Dash link.
And this will make our tax look more like a link so that when I hover over it, it changes color, etc.
So we've got the Class A.
We need an h ref for this to be a valid and a tank, and I'm just going to leave that empty, and now
if I run the code, you'll see that bootstrap has styled this completely differently and that when I
hover over it, it appears as a link by changing the color and also showing that little pointer.
So we've managed to create a very simple navigation bar just by adding a few classes and following the
structure that Bootstrap wants us to use.
So let's go ahead and add a few more links.
So I'm just going to copy these link items and paste two more in here.
So let's say that the second one is pricing, and the third link in our menu is just download.
And now that's run our code and you can see that the strange thing is that it's made on navigation bar
vertical, so each navigation item is vertically stacked on top of each other.
Now, that's not really what I designed it to be.
I want it to be horizontal like this and also like this.
So in order to do that, we need a class called NAV Bar Expand.
And this will expand the navigation items depending on how large the screen is.
So let me show you that by adding the code.
So we're going to add nav bar expand and we're going to say large.
So when I run this code, you'll see that in the current viewport, which is a which is kind of the
desktop size.
So laptop or desktop, where you've got quite a lot of width, you can see that all the links are horizontally
displayed next to each other.
Now, when I go into a smaller size, say on iPad or on iPhone, then it stacks vertically so that it
uses more of the real estate and it's easier to see now, as they specify here you can change that,
whether if it's large or medium or small, to specify at which point it should go into the vertical.
So for example, if I change this to medium and I run now, you can see that on a desktop, on a laptop
size, it is horizontal.
Tablet size is still horizontal, but smartphone size it goes into vertical.
So you can change that by just changing the keyword here.
So in my case, I'm going to stick to large because we're going to add a dropdown menu a little bit
later on.
Now the next thing I want to show you is that On-Off Bar is not very obvious at the moment.
It just looks like I've got three links.
I don't actually see any sort of bar.
Well, you can add the style of the NAF bar to make it look something like this by simply adding a background.
And we're going to use background light here.
So let's add a background light class and hit run.
You can see now on NAV Bar has this light background, and it shows more clearly where the nav bar is
and where the rest of the content is.
Now, in addition to that, you can change the actual style of the nutball so that it's not blue and
we can change the nav bar to have a light style hit run.
And you can see that this looks more similar to this because we're using the nav bar light style of
nav bars as they showed in the documentation.
Now, bootstrap by default, has a number of colors and you can see it.
Most obviously, if you go into the buttons documentation and they show you all the names of the colors.
So you've got primary, which is blue, and that kind of comes from the Twitter days where their primary
color was always light blue color.
Secondary is gray success, danger warning info line so we can use any of these colors just by using
those words.
So, for example, if I wanted the background to be red, then I can say background, danger hit run.
You can see it turns red.
Or if I wanted it to be yellow, then I can say background warning.
Hit run and I can change them to all of these colors that you see here.
Just by using their names now, in our case, I want to use a nav bar dark.
I want to change the background to dark as well.
Now let's hit run, and you can see we've got this black background with a white ish Nappa, so that
style comes from these two classes.
Now what if, like over here, I want to have a brand, say the name of my company or the logo?
How can I implement that?
Well, we can read through the documentation and you'll see that all we need to do is add a class called
NAV Bar Brand, and it tells you that it can be applied to most elements, but an anchor tag is the
best thing to apply it to.
So let's go ahead and do exactly that.
So outside of the unordered list, I'm going to add a new anchor tag and it's going to have a class
of nav bar brand.
And it's going to have an eight raffle of empty string.
And then I'm going to close off that tag and call it 10 dog after a brilliant company.
So let's hit run.
And you can see that we've now got the brand, which is styled slightly differently from the links to
be able to differentiate it.
And that and all of the styling and all of these components comes free from bootstrap just by adding
these classes.
And so I hope you're getting the hang of this.
So now that I've got all the items on my nav bar, but if we take a look at our design, we wanted the
brand to be on the left and we wanted all the links to be on the right.
So there's a little bit of space between them.
But but in our case, they're all kind of huddled together and that doesn't look very nice.
So how can we shift all of these links over to the right?
Well, first, let's first identify the container that holds all of these links, and it's not hard
to see that that would be the unordered list which separates this group from this part, which is not
Bob Brand.
Now, in order to move this unordered list over to the right.
All we need to do is just add another class and we're not going to need to write an excess of our own
to style was Napa.
So what I want is for there to be a margin at the start of this unordered list so that it will push
this group over here and bootstrap if we take a look inside the utilities.
You can see it's got something that allows us to add spacing and we can do that using margin or padding.
So in this case, we're going to choose to add a margin to the start of a class, and we're going to
add a bit of margin to the left of the pool so we can do this by simply adding a new class to our fuel.
So its end for margin s for start.
And then we're going to add Dash Auto.
And what this is going to do is it's going to set the margin to auto, which means it's going to fill
up as much space as it can possibly insert.
So it's kind of like a spacer.
And now if I hit run, you can see we've successfully managed to add that margin over to the left or
to the start of this unordered list group and gives us this two sided look.
So this is looking a lot better and a lot closer to what we've got in our design here.
Now there's just one thing that's not quite ideal at the moment when we go from laptop to tablet are
navigation bar changes into the vertical format.
Now, wouldn't it be so much better if when it gets too small to show all of these three links to simply
have a dropdown menu where we can see all of these links rather than have them take up so much space
in the navigation bar?
Well, how would we do that?
Let's take a look at the documentation on Bootstrap so we can scroll or simply select the toddler.
Now what the toddler does is that if you watch as I reduce the size of this navigation bar, then you'll
see that eventually it gets to a size where it's so small that it can't actually fit all of these links
in the same line.
Now you could either make the text smaller or make it vertically stacked on top of each other, as we've
got at the moment, all the more intelligent ways.
Having this button show up, which is called a hamburger menu because it looks or somebody.
Once thought it looks like a hamburger personally, being a hamburger connoisseur, I think it looks
nothing like a hamburger.
There's only so many fights you can fight.
So let's go ahead and click on that and you can see it creates this dropdown menu where we can now view
all of those links that are hidden.
And this makes the design really, really clean and also makes the best use of the size of the screen.
Because on a mobile phone, you probably don't want a bunch of tiny links bunched up in the same line.
It'll be really, really hard to read.
And instead, you want to have this nice dropdown menu.
So how can we implement this in our code?
Well, let's see what they did.
They added a button which is going to act as that hamburger menu button, and when you click on it,
it's going to target something called NAV Bar Toddler Demo zero two, which you can see is this thing
here.
So they've created a div that contains everything that is collapsible and put in it inside that div,
and they've given it the class of collapse, nav bar collapse and given it a I.D. that can be targeted
by this button.
Now let's see if we can do the same thing in our code.
So I'm just going to straight up copy this button over to here, and I'm going to put that just below
on nav element.
And the next thing I want to do is create that div.
Now, the location where you create the div is really, really important.
So first, I'm going to show you what it looks like when I create the div here and I'm going to surround
the brand as well as all of our links.
So the div is going to have a class of collapse, nav bar collapse.
Now sometimes you realize that bootstrap really could have made their class naming a little bit more
succinct.
You end up writing a lot of nav, nav, bar, nav, nav bar collapse.
But this is just the way that bootstrap works, and there are other frameworks which have more succinct
names for their classes.
But once you understand how bootstrap works, it's quite easy to pick up any of these other frontend
frameworks.
They all work in a really, really similar way.
So now we've got this did class called collapse, not bar collapse, and I'm going to put the closing
div just after all unordered list so that the unordered list.
So all of these three links, as well as our brand is enclosed in the collapsible section or the collapsible
div.
And the final thing we need to add before on NAV Bar is going to work is that we need that ID..
Because the button is targeting this specific ID, so it knows that when you click on this button,
which div to collapse or on collapse because you could have many of these collapsible sections on the
same website and you need something specific so that the code knows which parts to collapse and which
parts not to collapse.
So let's add that ID over here.
Now, of course, you can name your ID, whatever it is that you want, as long as it's the same as
the data target in your button, then it should work just fine.
So let's hit run.
And you can see now if I switch over to the phone sized, all of the content in my nav bar disappears,
including the NAV Bob Brand and all three of my links because we have enclosed all of them inside this
collapsible div.
So now if I click on this button, you will see a dropdown menu and a nice little animation that shows
everything that's contained in that collapsible area.
So in my case, I would actually rather like my brand to still show up when it is in the mobile size.
So I'm going to take out my Napa brand or rather this anchor tag, so I'm going to cut.
So it matters a great deal where you place that nav bar brand because if you paste it below the button
that is on toggle button, then when you hit run, you'll see that the brand appears on the right and
the toggle appears on the left.
Now, if you place this anchor tag for your brand above the button, however, then you hit run and
their positions get swapped.
So the first thing that gets rendered is the nav bar brand.
Then we render the button.
So this is something to be aware of, and in our case, we actually want the brand to be on the left
and the menu icons to be on the right.
So this is the format that we're looking for.
So now we've got this brilliant nav bar where it expands to have all the links on the right when it's
in a large display.
So a laptop or desktop.
And when we're on a smart phone or tablet, then it shrinks down into a toggle button, which we can
show or on show navigation menu.
Now there's a number of other things that you can do with the navigation bar.
So, for example, you can have a dropdown link like so just by adding the class dropdown to your list
item and have a link that is the dropdown toggle, and then you have a div with all the items that will
be inside the dropdown.
So you're basically just copying this list item and modifying it to your needs to specify how you want
your dropdown to look like.
Now you can also affect the position of the Navar by changing it to NAV Bar Fixed Top.
So that means when you scroll through your website, it will stay at that position and it won't disappear
off the screen.
Or you can have it fixed to the bottom so that you've always got it at the bottom.
And you can just copy this code to get this positioning and placement behavior.
Now, in the next lesson, we're going to be looking at the grid system and we're going to start to
build up our website.
So there's a lot more fun stuff yet to come, and I look forward to seeing you on the next lesson.