1
00:00:00,920 --> 00:00:01,510
‫Hey, there.

2
00:00:01,610 --> 00:00:02,300
‫Welcome back.

3
00:00:02,540 --> 00:00:09,470
‫Now in this lecture, let us discuss about component again, super important topic now had the important

4
00:00:09,470 --> 00:00:12,660
‫Oscars component make things simpler.

5
00:00:12,680 --> 00:00:16,910
‫That means there are several billion items with bootstrap.

6
00:00:17,390 --> 00:00:22,280
‫Well, we can do this with our own C so that we can build components of our own.

7
00:00:22,700 --> 00:00:27,920
‫For example, if you jump here with the first one, which is accordions, and if you scroll down, you

8
00:00:27,920 --> 00:00:31,370
‫will see this is all built in and we can directly copy the code.

9
00:00:31,940 --> 00:00:36,950
‫So if we want to include this in our website, maybe this one, we can do that.

10
00:00:36,950 --> 00:00:39,020
‫All we have to do is just copy this one.

11
00:00:39,350 --> 00:00:45,890
‫And now we also have information about understanding about CFS so we can utilize this custom bootstrap

12
00:00:45,890 --> 00:00:48,990
‫theme, but we can also include our own genius.

13
00:00:49,010 --> 00:00:53,660
‫Maybe I want to utilize different font, or maybe I want to have different color.

14
00:00:53,750 --> 00:00:54,650
‫We can do that.

15
00:00:55,100 --> 00:01:01,460
‫So this basically gave us power of CIUSSS as well as JavaScript because this utilized JavaScript.

16
00:01:02,060 --> 00:01:06,770
‫But we also get the option to customize with the help of common bootstrap theme.

17
00:01:07,010 --> 00:01:11,480
‫Also, with the help of our own CSS knowledge so we can copy this one.

18
00:01:11,480 --> 00:01:20,200
‫And simply, if I try to include a cat after this, Deb and I save this one and I get back here.

19
00:01:20,960 --> 00:01:23,000
‫You can see this is our accordion.

20
00:01:23,450 --> 00:01:29,690
‫And remember, we can keep this inside our container to have a proper sizing that ends on basic stuff.

21
00:01:29,690 --> 00:01:32,330
‫But I hope you got the idea what we are doing.

22
00:01:32,660 --> 00:01:37,190
‫So if I remove this from here and add it inside, container itself.

23
00:01:38,400 --> 00:01:39,240
‫Save this one.

24
00:01:39,870 --> 00:01:46,200
‫So now this is inside container so that it is going to have a proper weight, we can dig this in the

25
00:01:46,200 --> 00:01:47,070
‫form of Arrow.

26
00:01:47,760 --> 00:01:53,790
‫So that means if I just unload this and get back here, maybe I'm going to take this mine, save this

27
00:01:53,790 --> 00:01:54,070
‫one.

28
00:01:54,090 --> 00:01:54,870
‫Get back here.

29
00:01:55,230 --> 00:01:57,300
‫Now, this is calling something similar.

30
00:01:58,430 --> 00:02:01,460
‫So I hope you got the idea for this component.

31
00:02:01,910 --> 00:02:08,780
‫Basically, it's an Bardem's component to rebuild small structure on, I should say, small component

32
00:02:08,780 --> 00:02:11,690
‫that we require in our day to day life on our website.

33
00:02:12,020 --> 00:02:14,630
‫It can be navigation bar, it can be buttons.

34
00:02:14,630 --> 00:02:20,870
‫It can be maybe something like search form or it can be something like a fortnight sidebar anything.

35
00:02:21,260 --> 00:02:27,260
‫So each website can be divided into smaller versions, which is component, and then we can use them.

36
00:02:27,800 --> 00:02:33,740
‫Now here is a quick homework after the decision that is, after this whole component, make sure to

37
00:02:33,740 --> 00:02:37,820
‫take a break and jump on to each an individual component.

38
00:02:37,820 --> 00:02:42,320
‫That means click on the component and then visit each one of them.

39
00:02:42,890 --> 00:02:44,230
‫Now there are two use cases.

40
00:02:44,240 --> 00:02:49,970
‫The first one is you would understand what is this called because you see this type of content on multiple

41
00:02:49,970 --> 00:02:52,340
‫website, but you don't have information.

42
00:02:52,340 --> 00:02:54,770
‫What we call this, we call this accordions.

43
00:02:55,250 --> 00:02:59,650
‫Or maybe if you click on alert, you'll see this type of notification.

44
00:02:59,660 --> 00:03:02,100
‫But what we call this, we call them either.

45
00:03:02,510 --> 00:03:03,980
‫Now, here again, important thing.

46
00:03:03,980 --> 00:03:05,030
‫The other important thing.

47
00:03:05,870 --> 00:03:08,980
‫We have these common names that we discussed earlier.

48
00:03:08,990 --> 00:03:10,300
‫So this apply head on.

49
00:03:10,310 --> 00:03:17,300
‫So if I need to utilize alert, I can say alert, primary alert, danger alert, warning info.

50
00:03:17,570 --> 00:03:25,400
‫So all of them have names, then we have badges to see had this type of content whenever you see these

51
00:03:25,400 --> 00:03:26,570
‫type of things.

52
00:03:26,600 --> 00:03:28,610
‫These are basically badges.

53
00:03:29,690 --> 00:03:35,570
‫The other thing is about these bread crumbs, you see different type of website, maybe blog post or

54
00:03:35,570 --> 00:03:40,190
‫product, you'll see home, then they have categories, then they have grown up name.

55
00:03:40,760 --> 00:03:44,030
‫Then we have buttons of all stop us different type of buttons.

56
00:03:44,420 --> 00:03:48,230
‫And it was scroll down, you will see buttons with different format.

57
00:03:48,470 --> 00:03:50,360
‫And they also have hall in effect.

58
00:03:50,720 --> 00:03:57,080
‫So you have different options that you can utilize if you jump on to our website to utilize the dark

59
00:03:57,080 --> 00:03:59,210
‫button, which is to beat you dark one.

60
00:03:59,280 --> 00:04:02,180
‫And if you jump here, this button dot.

61
00:04:03,540 --> 00:04:06,540
‫So there are tons of options that we can play with.

62
00:04:06,780 --> 00:04:09,540
‫So we have this terrible option and for us state.

63
00:04:10,200 --> 00:04:15,510
‫And if I just jump on to pardon group, you will see when we are combining two or three words together,

64
00:04:15,810 --> 00:04:17,010
‫then we have cards.

65
00:04:17,010 --> 00:04:23,280
‫Important action again, you see different type of blog post that utilize these type of card.

66
00:04:23,700 --> 00:04:30,540
‫So you have image by the then you have some short description about blog post and then go read.

67
00:04:31,140 --> 00:04:34,160
‫So something similar we will use with our projects section.

68
00:04:34,170 --> 00:04:38,890
‫We will utilize a card and we will have live demo button as a less source code.

69
00:04:39,600 --> 00:04:43,460
‫So you jump there, you can scroll down and see different type of cards.

70
00:04:44,070 --> 00:04:50,200
‫Maybe you don't want a button or maybe you want something like list, or maybe you want multiple button

71
00:04:50,200 --> 00:04:51,600
‫start feature something else.

72
00:04:52,020 --> 00:04:55,650
‫So there are tons of option predefined with bootstrap.

73
00:04:56,520 --> 00:04:59,420
‫Now remember, we have this superpower by default.

74
00:04:59,430 --> 00:05:07,920
‫We have power about CSC so we can take these shortcuts and then customize it according to our own and

75
00:05:07,920 --> 00:05:09,750
‫our style, or see if that's fine.

76
00:05:10,500 --> 00:05:15,240
‫Don't forget that we have knowledge about CSC so we can do anything.

77
00:05:16,460 --> 00:05:22,010
‫Now that's all for this lecture, I hope you got the idea, what I was trying to do, I was trying to

78
00:05:22,010 --> 00:05:26,000
‫give you base understanding about all the bootstrap important content.

79
00:05:27,090 --> 00:05:32,220
‫Now, remember to check out all of them, because then our chances do you don't know what this speed

80
00:05:32,220 --> 00:05:32,820
‫ignition is?

81
00:05:33,210 --> 00:05:39,510
‫So basically when you see this type of page number, maybe on Amazon or maybe on any other e-commerce

82
00:05:39,510 --> 00:05:45,090
‫blog or anything, this number thing is known as pagination, which most website utilize.

83
00:05:45,600 --> 00:05:49,650
‫Or maybe if I scroll down if you see any type of pop up.

84
00:05:50,340 --> 00:05:54,990
‫So here, if I take this demo, if I open this one, you see this type of pop up.

85
00:05:55,320 --> 00:06:01,020
‫We call this as more model model, whatever you want to pronounce it, but we call this model.

86
00:06:01,620 --> 00:06:04,530
‫So there are lot of things that you will understand.

87
00:06:04,740 --> 00:06:06,480
‫One of the important thing is toast.

88
00:06:06,870 --> 00:06:13,410
‫So you see this type of pop up, maybe on different website, maybe at the time of registration itself

89
00:06:13,410 --> 00:06:14,360
‫on different website.

90
00:06:14,370 --> 00:06:20,310
‫You see these type of pop up, or you can call as notification on Facebook or any other website.

91
00:06:20,760 --> 00:06:22,510
‫So this is known as Ghost.

92
00:06:23,400 --> 00:06:27,060
‫So I hope you got the basic idea what all these components are.

93
00:06:27,120 --> 00:06:32,940
‫These are pre-defined small parts of our website, and we can use them anywhere we want.

94
00:06:33,390 --> 00:06:35,550
‫And this happens with multiple other websites.

95
00:06:35,700 --> 00:06:41,610
‫Most of the big companies design their own components, so maybe if they want to utilize these, they

96
00:06:41,610 --> 00:06:45,600
‫can directly jump onto their own guide on framework and utilize them.

97
00:06:46,050 --> 00:06:52,020
‫If you remember the Spotify project or if you have watched my Spotify project, you will have an omission

98
00:06:52,020 --> 00:06:55,800
‫that Spotify has its own font or few other things.

99
00:06:55,800 --> 00:06:57,930
‫So that's so other companies also do.

100
00:06:58,260 --> 00:06:59,550
‫They have their own fonts.

101
00:06:59,550 --> 00:07:03,240
‫They also have these small components behind the scene.

102
00:07:04,640 --> 00:07:09,530
‫So that's all for this lecture, we will explore more things at the time of project building.

103
00:07:10,130 --> 00:07:12,710
‫Now the only thing remaining is this one.

104
00:07:13,160 --> 00:07:15,170
‫So form require many options.

105
00:07:15,400 --> 00:07:20,920
‫And if you scroll down, you will see these swarms can be utilized, maybe for registration, maybe

106
00:07:20,920 --> 00:07:25,100
‫for contact form, maybe for logging or a few other things.

107
00:07:25,610 --> 00:07:31,670
‫So I strongly recommend jump on to the form section and then you can utilize different information like

108
00:07:31,670 --> 00:07:34,700
‫form control, Celek checkbox and radios.

109
00:07:35,030 --> 00:07:41,420
‫Just go through them because you already know success, so you have information about what is this important

110
00:07:41,420 --> 00:07:42,950
‫label you know about them.

111
00:07:43,580 --> 00:07:49,510
‫But here's the important thing is this phone check these are the classes that are pre-written, whether

112
00:07:49,610 --> 00:07:50,440
‫bootstrap.

113
00:07:51,020 --> 00:07:57,410
‫And remember, at this point, this whole CSV file that we have included, this is where the whole content

114
00:07:57,410 --> 00:07:57,680
‫is.

115
00:07:58,840 --> 00:08:03,700
‫I really think this audience, everything is inside this see is the spine.

116
00:08:04,270 --> 00:08:05,590
‫Now let me try to open this.

117
00:08:09,550 --> 00:08:12,340
‫Now, if I try to search about this container.

118
00:08:14,460 --> 00:08:15,180
‫Such associate.

119
00:08:16,420 --> 00:08:16,750
‫OK.

120
00:08:16,780 --> 00:08:20,800
‫There are tons of things, but here you can see this whole container thing.

121
00:08:22,010 --> 00:08:28,370
‫And how where does 100 percent then there is something related to padding part in the left and right

122
00:08:28,370 --> 00:08:29,150
‫margin.

123
00:08:29,420 --> 00:08:31,140
‫So everything is defined here.

124
00:08:31,550 --> 00:08:38,640
‫Now one other important thing you can see they have defined different media queries for 768 pixels and

125
00:08:38,660 --> 00:08:39,740
‫720 pixels.

126
00:08:40,190 --> 00:08:41,300
‫Now you can.

127
00:08:41,300 --> 00:08:47,000
‫If you want to read this, you can just copy this whole thesis and then just converted from minified

128
00:08:47,000 --> 00:08:50,660
‫to normal one in minified be removed the extra spacing.

129
00:08:51,810 --> 00:08:55,770
‫So that's all for this lecture, I hope you got the idea about forms as well as component.

130
00:08:56,160 --> 00:09:00,250
‫Now take a break, explore all of them, just understand about them.

131
00:09:00,270 --> 00:09:05,700
‫It's easy for you and all you know about Caesar, so all you have to do is just understand about DNA

132
00:09:05,700 --> 00:09:06,720
‫and what has dismissed.

133
00:09:06,990 --> 00:09:07,830
‫What is this now?

134
00:09:08,420 --> 00:09:09,930
‫What is this popovers?

135
00:09:10,290 --> 00:09:12,450
‫Just go check each one of them.

136
00:09:12,600 --> 00:09:16,200
‫Don't call if you don't want, but at least know about their name.

137
00:09:16,980 --> 00:09:17,610
‫So that's it.

138
00:09:17,760 --> 00:09:21,570
‫We are done without a whole basic introduction with bootstrapping.

139
00:09:22,020 --> 00:09:24,690
‫It's good time for us to jump on to our project, but.

140
00:09:26,240 --> 00:09:32,150
‫And one other remaining thing that we will discuss during Project is icons, so Bootstrap has its own

141
00:09:32,150 --> 00:09:32,710
‫icon.

142
00:09:32,750 --> 00:09:34,760
‫We will utilize them during the project.

143
00:09:35,510 --> 00:09:35,970
‫That's all.

144
00:09:35,990 --> 00:09:37,610
‫And I see you guys in the next one.