Now, we're steadily getting closer to our final design for our front page header. 1
But one of the things that you notice is that our download buttons still look extraordinarily out of 2
place. 3
They don't look like they've been styled at all, even though they are using Bootstrap. 4
So, in this lesson, I want to talk about another Bootstrap component which is the Bootstrap button. 5
Now, if you head over to the documentation for the Bootstrap buttons, 6
so just go to Documentation, Components, Buttons, then you can see that there's a whole bunch of buttons 7
that we can choose from, 8
and they come with the Bootstrap palette, which allows you to simply use one of these classes, for example, 9
btn-primary for a blue button and btn-warning for a yellow button, etc.. 10
Now there's also other types of buttons. 11
For example, you can have outline buttons, which become filled in as you hover over them, which looks pretty 12
nice. 13
Now, you can also have larger or smaller buttons, or buttons that take up the entire width of the parent. 14
Now, because we've seen this before and we played around with this in a previous lesson, I want you, as 15
a challenge, to add a dark and light button to style our download buttons here, and it should look somewhat 16
like this as the final outcome. 17
So these are large buttons, and the left one is dark and the right one is a outlined light button. 18
So, pause the video and see if you can complete that challenge with the help of the Bootstrap documentation. 19
All right. So how did that go? 20
All right. 21
So let's head into Atom and let's find the relevant section first. 22
So here is our title section with our little comment here, 23
and we've got our two download buttons. Now, 24
they are button elements of type button, 25
so all we need to do here in order to implement the Bootstrap styles is just to add a class. 26
So, after the type, I'm going to add a class, and the first one to make it into a Bootstrap button is 27
btn. 28
And the next one specifies what type of button I want. 29
So, the left one I wanted a dark button, and that's filled in already. 30
So I will go for the button, button dark, 31
so btn-dark. 32
So let's hit save and let's check to see if we got what we wanted, which looks pretty close, 33
right? 34
And then the next one we wanted was a light outlined button for the one on the right. 35
So let's scroll down to the outline buttons, and let's find that light one which is almost imperceptible, 36
because the background is white, but we can see it when we hover over it. 37
So this is the one that we're looking for, and this requires the class btn-outline-light, which is 38
a little bit longer. 39
So let’s head over here and again add another class, and this one is btn btn-outline-light, 40
hit save and refresh, and we've now got our button styles down. 41
Now, you notice that we specified that we wanted the larger buttons here. 42
So let's head into Bootstrap again and look at the Sizes section of the button component, and you can 43
see that, just by simply adding a class called btn-lg or btn-sm, we can change 44
the size of our buttons without touching the CSS. 45
So, let's go and add yet another class to our button, which is btn-lg or lg, 46
both of them, let's hit save, head back and refresh. 47
And now we've got some lovely Bootstrap buttons, making our web site look a lot nicer than before. 48
Now one thing you might notice that I've got here in our final version of the web site that we don't yet 49
have over here are these pretty little glyphs or icons on the left of our download buttons. 50
Now these things come from a web site called Font 51
Awesome. 52
And it is really really awesome. 53
And the reason is because they have over 900 icons which are free for commercial use and they have a 54
really really generous license, which means that the icons are open source and completely free for use 55
in any of your web sites. 56
So head over here, and we're going to go over to the icon section in order to try and find our Apple and 57
Google Play icon. 58
So let's search for Apple, and the first one that comes up is the one that we want. 59
You can see that this is the full vector that they've drawn. 60
And you can see it in the various different sizes, or how it looks with different backgrounds, 61
and they've even styled it and put it into, you know, some common usage scenarios, so that you can imagine 62
what it might look like. 63
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, 64
it’s implementing these glyphs by adding a couple of classes. 65
So, firstly, you’ve got the Font Awesome button, fab, and then you’ve got fa-apple, which specifies 66
exactly which glyph, or which icon, you're looking to insert. 67
Now, before we can use this, however, similar to Bootstrap, we need to add Font Awesome to our web site. 68
So let's head over to get started. 69
And the first thing you see is Use Font 70
Awesome Free CDN, 71
so, similar to what we had with Bootstrap, Font 72
Awesome has a CDN that distributes the resource, 73
so the Font Awesome icons, and allows you to embed this into your web site, so that any users who don't 74
have, who've never opened a web site that required Font Awesome, they'd be able to go here and download 75
it. 76
So let's go ahead and copy this and insert it into our web site, so just below where we've got our CSS. 77
I'm going to paste this in. And this is probably a good time to start commenting on what some of these 78
things are. 79
And, as you find your code getting more lengthy and more complex, it's a good idea to start commenting 80
on things, so that you remember later on when you come back what everything is all about. 81
So, the first one we've it are Google Fonts. 82
So, the way that I prefer to do it is just to type out plain text highlight it and then hit command or 83
hold down control in Windows and hit forward slash, 84
and that basically comments that particular line of text. 85
So those are the Google fonts and these are the CSS stylesheets. 86
And then we've got our Font 87
Awesome. 88
And finally we have our Bootstrap Scripts, put that in as well. 89
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 90
idea to sprinkle these around in your code so that it's really clear to yourself or anybody else who 91
looks at your code what everything is all about. 92
And also, as you're doing the tutorials, and, you know, you're learning about these different components, 93
or how you use selectors in CSS, etc., all these new concepts, once you understood what they're all 94
about, you can add a comment to remind yourself in case you come back to it at a later date. 95
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 96
this line of code, and we can now insert it wherever we want to use it, because we now have that CDN where 97
we can download and derive any icons that we want to use. 98
So let's go back to our download button, and, just in the text section, 99
so between the button elements, I'm going to insert this icon, and then I'm going to insert a space 100
in between. 101
Now, you'll notice that, by default, Font 102
Awesome likes to use the i tag. 103
So this is the italic tag, which is not that great in terms of HTML best practice, but the reason that 104
they can use it is because glyphs and icons are not italicized, so it doesn't become slanted. 105
And they say that they use it just because the i tag is pretty much the shortest tag that can be used 106
for this purpose. 107
So you can use what they recommend, which is the i tag, or if you prefer to have a more semantically understandable 108
HTML code, then you can change that into a span as well. 109
And you'll see either the i or the span when people are using Font Awesome out in the wild. 110
So I'm just going to leave it as it is, because it is short and it is quite easy to spot. 111
Now let's hit save and see what this looks like. 112
So let's hit refresh and you can see we've now got a little Apple icon, a space, 113
and then our download text. 114
So, as a challenge, I want you to go into Font Awesome and find the Google Play icon, and implement that 115
in your code so that you have the second button that looks a bit like this. 116
So pause the video and complete the challenge. 117
All right. 118
So that shouldn’t be very hard. 119
We just had to go back to the Font Awesome page and search for Google Play. 120
And now we've got our icons showing up, and this is exactly what we want, and we can just copy this line 121
of code and paste it where we pasted our last icon, which is just before the download button. 122
And then we hit space. 123
Now make sure that you're not pasting it into the actual button element, because it's actually a separate 124
piece of text that belongs between the element tags. 125
So now let's hit save and let's go back and refresh. 126
We've now got an Apple download icon and a Google Play download icon. 127
So it's looking pretty good so far. 128
Now, in the next lesson, I want to finish styling up the title section of our web site, so that it looks 129
more like this. 130
Now if you want to give it a go 131
before we start. 132
Now if you want to give it a go before I start walking you through the step by step, 133
then you can just simply pause this video right now and look at the design that I've got onscreen, and 134
try to use a combination of documentation, 135
so CSS documentation along with Bootstrap documentation, and maybe sometimes you might need to search 136
for something on Stack Overflow, especially how you might get this image to rotate. 137
So there's quite a bit of styling involved and this is completely optional. 138
But I do recommend giving it a go yourself before watching me go through the solution, just so that you 139
start thinking and challenging yourself on how you might do this yourself. 140
So, pause the video now, and make a copy of your project as it is now to mess around with and try to complete 141
this challenge. 142
Otherwise I will see you on the next lesson.