All language subtitles for 2. Installing Bootstrap

Now, in the last lesson we spoke about all the amazing things that you can do with Bootstrap, and how
1

generally awesome it is.
2

So in this lesson I want to show you how exactly do you get access to this awesome library.
3

How do you install it into your web site projects?
4

So, to do that, let's head into Atom, and let's add our Web Development project folder in here, so that
5

we can create a new folder called Bootstrap-installation.
6

And inside this folder I'm going to create a new file called index.html.
7

Now that we have this new web site, we can go ahead and create the html boilerplate, and give our web site
8

a title, Bootstrap Installation, and under the title, which is usually where we put in our links that linked
9

to our stylesheets, for example, this is where we can add the Bootstrap framework.
10

So if you head over to getbootstrap.com, you'll see that they've got a whole page that's dedicated
11

to how you can install Bootstrap, and it's super super easy.
12

So, the simplest way is just to copy the BootstrapCDN and paste it into here, and all that this does
13

is that when your browser reads through this code to try and load up the web site, once it gets to
14

this line, it goes over to this
15

URL and downloads the Bootstrap files
16

if the user doesn't already have it cached on their browser.
17

So I just want to quickly explain, firstly, what a CDN is.
18

So CDN stands for Content Delivery Network, and the concept is really simple.
19

So, do you remember how previously we looked at how the Internet is delivered through all of these submarine
20

cables,
21

right?
22

So, for example, if the server for my web site is in the US, say, in the West Coast, and I try to access
23

my web site from the UK, then I would probably need to go through one of these transatlantic cables, and
24

then there’ll be some more wires that goes across the land,
25

and that request reaches my server over here. And then once that request is received, then it has to send
26

back all of those files, the HTML, the CSS, the Javascript, back through all of those routes and back to
27

me, to my browser, so that it can be displayed on my web site.
28

Now, as you can imagine, if that is the only location where your web site exists, then that's quite a long
29

route to travel.
30

And even though these are pretty fast cables, it still generates a delay of, you know, maybe a few milliseconds,
31

or if there's a lot of data that I need to fetch over, like images or videos, there might be a delay of
32

a few seconds, and, I don't know about you, but I generally don't wait for a web site to load beyond maybe
33

like two seconds, at which point I presume,
34

oh, you know, it's probably down or there's probably some problems.
35

So this is where a Content Delivery Network comes in.
36

So instead of hosting your web site just in a single location, say over here, you actually have a whole
37

bunch of points where that web site can be accessed.
38

So that means that if my request starts off from the UK, then it will look for the location that is the
39

shortest distance to get that web site delivered. And that dramatically cuts down on the latency, or how
40

long it takes for your web site to load up.
41

And in terms of Bootstrap, they've hosted their Bootstrap CSS files on MaxCDN, which has a whole number
42

of routing points across the world.
43

So that means when your users are trying to load up your web site that's using Bootstrap, then it can
44

access it relatively quickly no matter where in the world they are.
45

So that's a quick lowdown on CDN.
46

And that means that when your browser reaches this link, it'll look for the shortest route to download
47

this CSS file
48

if the user doesn't already have it. Now, because Bootstrap is one of the most popular frameworks that
49

a lot of modern web sites will have, then it's very very likely that your users will have already downloaded
50

this CSS file because they've loaded up a web site that uses the same file.
51

And when that happens your browser actually caches it,
52

so it saves the local copy
53

so you don't have to download it every single time.
54

And that's one of the other advantages of working with Bootstrap. Because it's so common, because it's
55

so popular, your users will probably already have this file on their browser cache,
56

then it will again cut down on the latency.
57

So now this is one way of installing Bootstrap onto our web site.
58

And now if I go ahead and add a h1 for example, then you'll see that it gets styled using the Bootstrap
59

framework.
60

So let's copy the full path,
61

go to our browser and paste this in.
62

You can see that this font is different.
63

So say if I go ahead and comment this out, so I'm going to highlight this line and select command /
64

or control / on Windows, hit save, and we go back over here and we refresh, then you can
65

see this is our default HTML styling, which is this Serif font that looks kind of ugly, but with Bootstrap
66

it looks a little bit nicer.
67

Now, the other way that you can add Bootstrap to your web site, especially if you're creating a web site
68

from scratch, is to just copy and use their starter template.
69

You can see that it's got the HTML5 declaration.
70

It's got all of the things that you normally need in your web site,
71

the character set, the Bootstrap CSS,
72

it’s got a title already added for you, the body, the h1, which you can delete if you don't need.
73

And then at the bottom it's got some Bootstrap Javascript and jQuery.
74

Now we're going to be learning about Javascript and jQuery in in the next modules,
75

but for some of the components in Bootstrap to work they actually need some Javascript.
76

So for example if something has to change in appearance on your web site,
77

so, for example, like a dropdown menu,
78

then this actually needs a little bit more code than just HTML and CSS, because this is kind of a functionality,
79

right?
80

And that's what this Javascript and jQuery is going to help achieve.
81

So if you wanted the complete set and for everything that you'll implement in Bootstrap to work, then
82

the easiest way is just to simply paste in the starter template and now you will have everything that
83

you need in order to start using Bootstrap.
84

Now the third way of installing Bootstrap is to simply download the CSS and Javascript source code
85

so that you can include it into your web site.
86

So instead of pointing to a URL on the Internet, you can point to a relative URL that will be included
87

with your web site.
88

So, for example, you might say, you know, go into this CSS folder and find a
89

bootstrap.css.
90

And this is what I want to use for my web site instead.
91

Now the downside to this is that this negates any sort of caching that a user will have. Because this
92

is a completely separate file,
93

the browsers will not recognize this and will not know that it's already been downloaded and already
94

been cached, so we will have to download all of these files when it tries to load up your web site, which
95

leads to possibly a little bit more latency.
96

So throughout this course we'll be working with the easiest way of using Bootstrap which is simply to
97

get it through the CDN.
98

And usually I tend to advise just when you're starting out creating the web site using Bootstrap
99

is just to load up the example code
100

and this means that you'll have everything in there ready to go
101

and it was only one copy and paste away.
102

So that's my recommendation,
103

but of course it's completely up to you how you decide to do it. In the next lesson,
104

we’re going to look closer at how we can design our web site and start replicating the designs using
105

Bootstrap.
106

So I'll see you there.