1
00:00:05,430 --> 00:00:08,880
Welcome back, everyone, to this section of the course, we're going to talk about Bootstrap.

2
00:00:10,090 --> 00:00:14,260
Now that we understand each smell and CSAs, we're almost ready to complete, ah, this question of

3
00:00:14,260 --> 00:00:18,940
the front end stack, one of the last topics we're going to be talking about is the bootstrap framework,

4
00:00:19,180 --> 00:00:23,710
which allows us to quickly create common front end components that look good for our website.

5
00:00:24,960 --> 00:00:30,930
You can think of bootstrap as a combination of a CSV file already created for you and Rick to use arranged

6
00:00:31,260 --> 00:00:32,159
HTML components.

7
00:00:32,580 --> 00:00:38,040
It also uses a grid system to easily resize her web page for things like mobile, tablet or desktop

8
00:00:38,040 --> 00:00:38,520
screens.

9
00:00:39,790 --> 00:00:44,990
In this section, we're simply going to explore a few examples of commonly used components and web page

10
00:00:45,070 --> 00:00:48,700
features with Bootstrap that we can use in our own sites later on.

11
00:00:49,210 --> 00:00:52,480
Do not feel like you need to memorize any of the bootstrap code here.

12
00:00:52,810 --> 00:00:57,910
Really, the documentation is designed specifically to be used as a reference, and we really want to

13
00:00:57,910 --> 00:01:03,520
become experts in retrieving and looking up the information that we're interested in, rather than becoming

14
00:01:03,520 --> 00:01:06,370
experts in just memorizing every single bootstrap component.

15
00:01:07,750 --> 00:01:12,340
So we're just going to talk about a few things in this section, and those are buttons, forms and nav

16
00:01:12,340 --> 00:01:13,780
bar, which is a navigation bar.

17
00:01:13,810 --> 00:01:15,670
And then the grid system within bootstrap.

18
00:01:17,410 --> 00:01:21,670
Now, I do want to briefly explore the documentation just to get an idea of how it all works.

19
00:01:21,940 --> 00:01:25,030
So let's go to get bootstrap dot com in our browser.

20
00:01:25,570 --> 00:01:29,050
All right, here I am at GEP Bootstrap dot com at the home page.

21
00:01:29,050 --> 00:01:34,750
There is the ability to actually download the source that is things like the JavaScript and CSS files

22
00:01:34,990 --> 00:01:36,670
for the use of bootstrap.

23
00:01:36,820 --> 00:01:41,710
However, there is this really nice feature, which is just deliver, which allows us to simply just

24
00:01:41,710 --> 00:01:48,580
attach these links and then our website or web page will automatically connect using this just deliver

25
00:01:48,580 --> 00:01:49,060
system.

26
00:01:49,360 --> 00:01:53,680
So that's going to be really easy to use, and we should also note that there's a bunch of icons that

27
00:01:53,680 --> 00:01:57,610
come with bootstrap that are open source and you can actually use them yourself as well.

28
00:01:58,180 --> 00:02:03,280
So we're going to come over here and just show an example of what bootstrap is, how it works, and

29
00:02:03,280 --> 00:02:08,050
just kind of a quick idea of what you would actually do this or use this for.

30
00:02:08,199 --> 00:02:14,830
So if you go to examples at the top of the web page, this takes us to the bootstrap examples page and

31
00:02:14,830 --> 00:02:20,460
you can see a bunch of snippets like headers, heroes, features, sidebar, custom components, etc.

32
00:02:20,740 --> 00:02:26,860
So for example, let's say you end up developing a product and a website where there's some sort of

33
00:02:26,860 --> 00:02:31,300
pricing information you can see right here that there's a pricing example, there's a navigation bar

34
00:02:31,300 --> 00:02:33,970
at the top, there's pricing, and then there's these little cards.

35
00:02:33,970 --> 00:02:39,100
You can compare plans, etc. So already this looks or should look pretty familiar to you.

36
00:02:39,370 --> 00:02:43,690
And the more and more you end up using bootstrap, the more and more you're going to see bootstrap like

37
00:02:43,690 --> 00:02:45,640
components across the entire internet.

38
00:02:46,000 --> 00:02:51,160
And if you were curious as far as how to actually implement this on your own website, you could just

39
00:02:51,160 --> 00:02:55,600
right click click on View Page Source and here is the actual source code.

40
00:02:55,990 --> 00:02:58,660
Now, this is not maybe the nicest way to actually look at this.

41
00:02:58,960 --> 00:03:02,560
So maybe you're only interested in some of the components, which is what we're going to be covering

42
00:03:02,560 --> 00:03:06,670
in the section so we can go back here and we go to the docs.

43
00:03:07,600 --> 00:03:10,090
There's a whole getting started introduction download section.

44
00:03:10,360 --> 00:03:15,610
But really, what we're going to be focusing on are just separate components and ideas like forms and

45
00:03:15,610 --> 00:03:16,240
layouts.

46
00:03:16,540 --> 00:03:21,850
So I want to show you an example of how you can quickly go to the bootstrap documentation and implement

47
00:03:22,150 --> 00:03:23,560
the actual code yourself.

48
00:03:23,950 --> 00:03:30,520
So we're going to do here is let's imagine we wanted to maybe set up our own form, so click here on

49
00:03:30,520 --> 00:03:31,060
forms.

50
00:03:31,450 --> 00:03:37,540
I see I click on overview of forms and essentially the entire documentation is going to be an example

51
00:03:37,720 --> 00:03:38,320
of something.

52
00:03:38,590 --> 00:03:41,620
And then the code for that example, if you come here, you'll notice there's code.

53
00:03:41,950 --> 00:03:47,860
And what you'll end up realizing is bootstrap itself is essentially just a bunch of very specific class

54
00:03:47,860 --> 00:03:54,190
calls that the documentation tells you what to do, and you can copy this code and put it directly into

55
00:03:54,520 --> 00:03:55,870
your HTML file.

56
00:03:56,020 --> 00:04:00,700
So a lot of this will just be copying from the actual documentation, and then you just have to remember

57
00:04:00,700 --> 00:04:02,020
to link to the CSV file.

58
00:04:02,230 --> 00:04:03,370
In fact, let's do that right now.

59
00:04:03,640 --> 00:04:07,210
You'll notice this is actually a pretty nice form, so let's imagine we wanted to use it.

60
00:04:07,540 --> 00:04:08,920
I can just hit copy here.

61
00:04:09,220 --> 00:04:10,750
It's going to copy it to my clipboard.

62
00:04:11,110 --> 00:04:13,090
I'm going to bring in visual studio code.

63
00:04:13,540 --> 00:04:20,380
And then here inside my HTML file, I'm just going to put this here in the form and the body of the

64
00:04:20,529 --> 00:04:20,920
HTML.

65
00:04:21,339 --> 00:04:25,660
Now, if we actually look at this, it doesn't look that great right now because we haven't actually

66
00:04:25,660 --> 00:04:29,920
connected the CSS and JavaScript files that bootstrap uses.

67
00:04:30,040 --> 00:04:30,520
So we do.

68
00:04:30,520 --> 00:04:36,460
Here is once you actually have your HTML code, if we wanted to make it look nice quickly, I can just

69
00:04:36,460 --> 00:04:38,920
copy and paste those links for the CSS.

70
00:04:39,790 --> 00:04:43,660
And you can actually get those on the home page or you can get them on the getting started page.

71
00:04:43,960 --> 00:04:46,780
So I'm going to copy CSS and also this JavaScript.

72
00:04:47,110 --> 00:04:49,090
So we simply copy this link.

73
00:04:50,110 --> 00:04:51,340
And then we're going to come back here.

74
00:04:52,300 --> 00:04:57,910
And we have our link to our own style sheet at which we can use to overwrite bootstrap if we want to,

75
00:04:58,060 --> 00:04:59,290
but I'm going to paste that in.

76
00:05:00,010 --> 00:05:05,540
Save those changes and just by pasting in the CSIS, we can already see that it looks a lot nicer.

77
00:05:05,620 --> 00:05:08,470
And clearly, you can begin to add things like spacing and padding.

78
00:05:08,740 --> 00:05:15,310
So this would only be in a certain container or portion of your web site, but you get the idea of essentially

79
00:05:15,310 --> 00:05:22,930
all bootstrap is is this idea of these prefabricated, easy to use HTML components that already have

80
00:05:22,960 --> 00:05:24,520
the class connections for you?

81
00:05:24,910 --> 00:05:31,300
And then what you do is then you just link to the bootstrap thesis and before you know it, you have

82
00:05:31,300 --> 00:05:36,550
this really nice looking form that you're going to start seeing across the entire internet as you get

83
00:05:36,550 --> 00:05:37,780
more and more into bootstrap.

84
00:05:38,020 --> 00:05:40,030
But that's the main idea of what we're covering in this section.

85
00:05:40,060 --> 00:05:45,580
It's just the main ideas behind the commonly used components of bootstrap that we're going to be using

86
00:05:45,910 --> 00:05:48,610
and then making sure we connect it to bootstrap.

87
00:05:49,270 --> 00:05:55,210
And once you do that, you're going to see that you can easily build out really nice looking HTML components

88
00:05:55,210 --> 00:05:57,550
and web pages quickly with bootstrap.

89
00:05:58,030 --> 00:05:58,300
OK.

90
00:05:58,630 --> 00:06:03,790
So again, we're going learn about buttons, forms, nafaa and the grid system in the upcoming lectures.

91
00:06:04,000 --> 00:06:04,570
I'll see you there.