All language subtitles for 13. Bootstrap Buttons & Font Awesome

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.