1
00:00:09,810 --> 00:00:12,800
Hello everyone and welcome back to our bootstrap course.

2
00:00:12,810 --> 00:00:17,910
In this lecture we're gonna be showing you how to import bootstrap into your Web site.

3
00:00:17,910 --> 00:00:22,040
So here I have the basic temporary for web set up from J.S. Ben.

4
00:00:22,260 --> 00:00:29,100
And I'm just going to add bootstrap to this Web site because without adding bootstrap into the page

5
00:00:29,150 --> 00:00:35,790
then I wouldn't be able to access bootstraps classes styling etc. So I have to get bootstrapped into

6
00:00:35,820 --> 00:00:40,160
the page so to do that I'm going to go to get bootstrap dot com.

7
00:00:40,230 --> 00:00:45,060
This Web site and click on get started and then click on the download button here.

8
00:00:45,060 --> 00:00:53,340
So go to the download page and I'm just going to zoom in a little here and scroll down to here where

9
00:00:53,340 --> 00:00:55,790
we had the section bootstrap CBN.

10
00:00:56,130 --> 00:01:00,360
And what you won't need is this section as well as this section down here.

11
00:01:00,390 --> 00:01:04,230
So this top section is two lines of code.

12
00:01:04,230 --> 00:01:10,290
The first is the style sheet which contains bootstrap styling and the second is the source to the bootstrap

13
00:01:10,350 --> 00:01:15,220
CBN ICD and means that you can use bootstrap without downloading it.

14
00:01:15,240 --> 00:01:22,500
You can just included script and this will allow you to access bootstrapped the script and just before

15
00:01:22,500 --> 00:01:28,860
those two you also have to add these two script tags as well which includes J.

16
00:01:28,860 --> 00:01:36,840
Query and Popper as you can see these are just required if you are using the CBN and we are using the

17
00:01:36,840 --> 00:01:42,680
CBN because we're gonna be testing our projects on J.S. bin and on James Bean.

18
00:01:42,810 --> 00:01:46,080
We can't download and bring in bootstrap.

19
00:01:46,080 --> 00:01:54,030
So instead we're going to access it the scripts if you prefer to download bootstrap manually onto your

20
00:01:54,030 --> 00:01:55,170
computer you can do that as well.

21
00:01:55,380 --> 00:02:00,660
So right just copy this one and piece over to just spin and then copy this one and pasted just above

22
00:02:01,080 --> 00:02:04,320
these two in Jaspan as well.

23
00:02:04,710 --> 00:02:16,350
So what is going to look like is this just before the closing body tag paste in those four different

24
00:02:16,410 --> 00:02:17,160
scripts.

25
00:02:17,210 --> 00:02:22,230
So you notice at first I have the J Craig and I have the paper then I have a s sheet and then I have

26
00:02:22,230 --> 00:02:23,970
a bootstrap CDM.

27
00:02:24,000 --> 00:02:30,840
You can also put style sheets into the head as is typical but for testing purposes it's fine to leave

28
00:02:30,960 --> 00:02:33,750
the style sheet in the body as well.

29
00:02:33,750 --> 00:02:34,170
OK great.

30
00:02:34,170 --> 00:02:40,730
So this is the template code for every Web site you can make that you want to include bootstrap bins

31
00:02:40,750 --> 00:02:47,020
for next time you want to start a project you can use this exact code as your template for the project.

32
00:02:47,040 --> 00:02:47,280
OK.

33
00:02:47,310 --> 00:02:49,590
Thank you all for watching this far.

34
00:02:49,620 --> 00:02:54,900
Now that you have put in bootstrap you won't see any changes in the output but you will now be able

35
00:02:54,900 --> 00:03:03,500
to use bootstrap classes to create automatically styled and aligned and designed elements on your page.

36
00:03:03,510 --> 00:03:11,280
So instead of having default elements in default e-mail and CFS bootstrap or style them for you.

37
00:03:11,280 --> 00:03:11,530
OK.

38
00:03:11,580 --> 00:03:11,880
Great.

39
00:03:11,910 --> 00:03:18,870
So in the next lecture is going to be doing is testing out different core features of bootstrap learning

40
00:03:18,930 --> 00:03:25,380
some important elements that you should know how to add and build as well as some key utilities.

41
00:03:25,380 --> 00:03:30,110
Thank you all for watching and we're going to get started with all that in the next lecture.

42
00:03:30,120 --> 00:03:31,350
See you there.