Now, we're steadily getting closer to our final design for our front page header.
But one of the things that you notice is that our download buttons still look extraordinarily out of
place.
They don't look like they've been styled at all, even though they are using Bootstrap.
So, in this lesson, I want to talk about another Bootstrap component which is the Bootstrap button.
Now, if you head over to the documentation for the Bootstrap buttons,
so just go to Documentation, Components, Buttons, then you can see that there's a whole bunch of buttons
that we can choose from,
and they come with the Bootstrap palette, which allows you to simply use one of these classes, for example,
btn-primary for a blue button and btn-warning for a yellow button, etc..
Now there's also other types of buttons.
For example, you can have outline buttons, which become filled in as you hover over them, which looks pretty
nice.
Now, you can also have larger or smaller buttons, or buttons that take up the entire width of the parent.
Now, because we've seen this before and we played around with this in a previous lesson, I want you, as
a challenge, to add a dark and light button to style our download buttons here, and it should look somewhat
like this as the final outcome.
So these are large buttons, and the left one is dark and the right one is a outlined light button.
So, pause the video and see if you can complete that challenge with the help of the Bootstrap documentation.
All right. So how did that go?
All right.
So let's head into Atom and let's find the relevant section first.
So here is our title section with our little comment here,
and we've got our two download buttons. Now,
they are button elements of type button,
so all we need to do here in order to implement the Bootstrap styles is just to add a class.
So, after the type, I'm going to add a class, and the first one to make it into a Bootstrap button is
btn.
And the next one specifies what type of button I want.
So, the left one I wanted a dark button, and that's filled in already.
So I will go for the button, button dark,
so btn-dark.
So let's hit save and let's check to see if we got what we wanted, which looks pretty close,
right?
And then the next one we wanted was a light outlined button for the one on the right.
So let's scroll down to the outline buttons, and let's find that light one which is almost imperceptible,
because the background is white, but we can see it when we hover over it.
So this is the one that we're looking for, and this requires the class btn-outline-light, which is
a little bit longer.
So let’s head over here and again add another class, and this one is btn btn-outline-light,
hit save and refresh, and we've now got our button styles down.
Now, you notice that we specified that we wanted the larger buttons here.
So let's head into Bootstrap again and look at the Sizes section of the button component, and you can
see that, just by simply adding a class called btn-lg or btn-sm, we can change
the size of our buttons without touching the CSS.
So, let's go and add yet another class to our button, which is btn-lg or lg,
both of them, let's hit save, head back and refresh.
And now we've got some lovely Bootstrap buttons, making our web site look a lot nicer than before.
Now one thing you might notice that I've got here in our final version of the web site that we don't yet
have over here are these pretty little glyphs or icons on the left of our download buttons.
Now these things come from a web site called Font
Awesome.
And it is really really awesome.
And the reason is because they have over 900 icons which are free for commercial use and they have a
really really generous license, which means that the icons are open source and completely free for use
in any of your web sites.
So head over here, and we're going to go over to the icon section in order to try and find our Apple and
Google Play icon.
So let's search for Apple, and the first one that comes up is the one that we want.
You can see that this is the full vector that they've drawn.
And you can see it in the various different sizes, or how it looks with different backgrounds,
and they've even styled it and put it into, you know, some common usage scenarios, so that you can imagine
what it might look like.
So, in order to use it, all we need to do is just to copy this line, and you can see that, similar to Bootstrap,
it’s implementing these glyphs by adding a couple of classes.
So, firstly, you’ve got the Font Awesome button, fab, and then you’ve got fa-apple, which specifies
exactly which glyph, or which icon, you're looking to insert.
Now, before we can use this, however, similar to Bootstrap, we need to add Font Awesome to our web site.
So let's head over to get started.
And the first thing you see is Use Font
Awesome Free CDN,
so, similar to what we had with Bootstrap, Font
Awesome has a CDN that distributes the resource,
so the Font Awesome icons, and allows you to embed this into your web site, so that any users who don't
have, who've never opened a web site that required Font Awesome, they'd be able to go here and download
it.
So let's go ahead and copy this and insert it into our web site, so just below where we've got our CSS.
I'm going to paste this in. And this is probably a good time to start commenting on what some of these
things are.
And, as you find your code getting more lengthy and more complex, it's a good idea to start commenting
on things, so that you remember later on when you come back what everything is all about.
So, the first one we've it are Google Fonts.
So, the way that I prefer to do it is just to type out plain text highlight it and then hit command or
hold down control in Windows and hit forward slash,
and that basically comments that particular line of text.
So those are the Google fonts and these are the CSS stylesheets.
And then we've got our Font
Awesome.
And finally we have our Bootstrap Scripts, put that in as well.
So now, when we come back to this, we can see easily at a glance what we've got over here, and it's a good
idea to sprinkle these around in your code so that it's really clear to yourself or anybody else who
looks at your code what everything is all about.
And also, as you're doing the tutorials, and, you know, you're learning about these different components,
or how you use selectors in CSS, etc., all these new concepts, once you understood what they're all
about, you can add a comment to remind yourself in case you come back to it at a later date.
So let's save and let's go ahead and go back to that icon that we found, which was Apple, and let's copy
this line of code, and we can now insert it wherever we want to use it, because we now have that CDN where
we can download and derive any icons that we want to use.
So let's go back to our download button, and, just in the text section,
so between the button elements, I'm going to insert this icon, and then I'm going to insert a space
in between.
Now, you'll notice that, by default, Font
Awesome likes to use the i tag.
So this is the italic tag, which is not that great in terms of HTML best practice, but the reason that
they can use it is because glyphs and icons are not italicized, so it doesn't become slanted.
And they say that they use it just because the i tag is pretty much the shortest tag that can be used
for this purpose.
So you can use what they recommend, which is the i tag, or if you prefer to have a more semantically understandable
HTML code, then you can change that into a span as well.
And you'll see either the i or the span when people are using Font Awesome out in the wild.
So I'm just going to leave it as it is, because it is short and it is quite easy to spot.
Now let's hit save and see what this looks like.
So let's hit refresh and you can see we've now got a little Apple icon, a space,
and then our download text.
So, as a challenge, I want you to go into Font Awesome and find the Google Play icon, and implement that
in your code so that you have the second button that looks a bit like this.
So pause the video and complete the challenge.
All right.
So that shouldn’t be very hard.
We just had to go back to the Font Awesome page and search for Google Play.
And now we've got our icons showing up, and this is exactly what we want, and we can just copy this line
of code and paste it where we pasted our last icon, which is just before the download button.
And then we hit space.
Now make sure that you're not pasting it into the actual button element, because it's actually a separate
piece of text that belongs between the element tags.
So now let's hit save and let's go back and refresh.
We've now got an Apple download icon and a Google Play download icon.
So it's looking pretty good so far.
Now, in the next lesson, I want to finish styling up the title section of our web site, so that it looks
more like this.
Now if you want to give it a go
before we start.
Now if you want to give it a go before I start walking you through the step by step,
then you can just simply pause this video right now and look at the design that I've got onscreen, and
try to use a combination of documentation,
so CSS documentation along with Bootstrap documentation, and maybe sometimes you might need to search
for something on Stack Overflow, especially how you might get this image to rotate.
So there's quite a bit of styling involved and this is completely optional.
But I do recommend giving it a go yourself before watching me go through the solution, just so that you
start thinking and challenging yourself on how you might do this yourself.
So, pause the video now, and make a copy of your project as it is now to mess around with and try to complete
this challenge.
Otherwise I will see you on the next lesson.