1
00:00:01,110 --> 00:00:01,650
‫Hey, there.

2
00:00:01,830 --> 00:00:02,490
‫Welcome back.

3
00:00:02,910 --> 00:00:10,560
‫Now let us continue our task with Bootstrap now currently and why June five, as discussed earlier now

4
00:00:10,560 --> 00:00:17,670
‫on the sidebar, you will see multiple options options like customized layout, content form and on

5
00:00:17,670 --> 00:00:18,450
‫top of that thing.

6
00:00:19,050 --> 00:00:25,140
‫You don't have to worry much about customization since we are going to utilize the default content or

7
00:00:25,140 --> 00:00:28,890
‫default tag default properties that all stripped away.

8
00:00:29,610 --> 00:00:33,660
‫Yes, we are surely going to discuss about layout something really important.

9
00:00:34,020 --> 00:00:36,020
‫We are going to discuss about utilities.

10
00:00:36,030 --> 00:00:37,290
‫Another important point.

11
00:00:37,710 --> 00:00:42,180
‫Then we have components super, super important and then we have funds.

12
00:00:42,660 --> 00:00:44,670
‫So these are a few important points.

13
00:00:45,090 --> 00:00:48,210
‫Now it totally depend on you how you utilize them.

14
00:00:48,600 --> 00:00:51,780
‫I'm just trying to give you an example with this whole project.

15
00:00:52,260 --> 00:00:57,210
‫We are not going to utilize everything since you can only explore limited things.

16
00:00:57,630 --> 00:01:03,000
‫And once you understand how to utilize these limited things, you can just expand your knowledge by

17
00:01:03,000 --> 00:01:04,230
‫exploring the other ones.

18
00:01:04,950 --> 00:01:06,780
‫So I hope you got the idea.

19
00:01:06,930 --> 00:01:12,660
‫Now help us to sequence by which we are just going to understand the basics before even jumping on to

20
00:01:12,660 --> 00:01:13,140
‫project.

21
00:01:14,400 --> 00:01:21,750
‫The first thing is about utilities, it's important because Bootstrap has its own custom names, own

22
00:01:21,750 --> 00:01:28,620
‫custom designed, for example, if I jump on to back down now here you will see Bootstrap currently

23
00:01:28,620 --> 00:01:32,730
‫has classes for primary, which is a background color.

24
00:01:33,090 --> 00:01:38,120
‫Then secondary success, danger warning and for Light Dog and few others.

25
00:01:38,580 --> 00:01:41,850
‫So all of them will stay constant throughout.

26
00:01:41,860 --> 00:01:48,390
‫That means primary will be disclosed only on secondary will be disclosed only throughout the journey.

27
00:01:48,750 --> 00:01:55,800
‫Now, if I want to utilize them, all I have to do is, for example, here let me create a random section.

28
00:01:56,220 --> 00:01:58,710
‫Let me create a mine inside this.

29
00:01:58,710 --> 00:02:00,030
‫Let me create a section.

30
00:02:00,810 --> 00:02:03,360
‫Let's dive in and write some text.

31
00:02:04,170 --> 00:02:08,310
‫Now here, let me add our blog and let's say him and.

32
00:02:09,460 --> 00:02:11,050
‫Let me add another Blue Dog.

33
00:02:12,770 --> 00:02:14,540
‫And let in autumn five.

34
00:02:17,020 --> 00:02:19,570
‫So this is the current symbol structure.

35
00:02:20,400 --> 00:02:27,580
‫Now, if I jump on to our current demo, you will see both of these text great working fine, but if

36
00:02:27,580 --> 00:02:34,210
‫we need to utilize this property, all I could do is use this class and had I can add this class with

37
00:02:34,270 --> 00:02:36,730
‫my feedback and save this one.

38
00:02:37,870 --> 00:02:45,810
‫And similarly, here I can add another class and maybe utilize secondary or say for save this one,

39
00:02:45,830 --> 00:02:46,600
‫get back here.

40
00:02:47,440 --> 00:02:49,390
‫You can see that's how it is going to work.

41
00:02:49,690 --> 00:02:52,330
‫So you haven't included any type of success.

42
00:02:52,690 --> 00:02:55,810
‫And we are still able to use different types of properties.

43
00:02:56,320 --> 00:02:58,540
‫Now, this was a quick example about utility.

44
00:02:59,080 --> 00:03:01,380
‫Here we have tons of other things with background.

45
00:03:01,390 --> 00:03:02,440
‫You will see gradient.

46
00:03:02,980 --> 00:03:07,900
‫Then you will have options to customize with the help of sass and few other information.

47
00:03:08,290 --> 00:03:12,820
‫You don't have to dive deep in this, but you're going to explore this gradient as well as the normal

48
00:03:12,820 --> 00:03:13,120
‫thing.

49
00:03:13,780 --> 00:03:19,290
‫Now similarly, we have these I call them as charcoal because everything is written.

50
00:03:19,300 --> 00:03:21,850
‫I just need the correct code.

51
00:03:22,360 --> 00:03:28,060
‫So if I need to add a border, I can utilize directly border or if I need to add border top, I can

52
00:03:28,060 --> 00:03:32,260
‫use this Colorado border in the bottom, whatever I want.

53
00:03:32,440 --> 00:03:32,980
‫So.

54
00:03:34,020 --> 00:03:39,150
‫For example, next Saturday morning here with our current glass.

55
00:03:41,150 --> 00:03:42,050
‫Save this one.

56
00:03:42,080 --> 00:03:42,920
‫Get back here.

57
00:03:43,700 --> 00:03:48,920
‫So there is a border, if I try to Zoom, you will see that there is a border here.

58
00:03:50,210 --> 00:03:53,090
‫OK, let me try to change the color, so we have options.

59
00:03:53,510 --> 00:03:55,670
‫Currently, we are using this border space.

60
00:03:55,880 --> 00:04:04,610
‫Then I need to utilize border primary or this is primary I need to use to border success or danger or

61
00:04:04,610 --> 00:04:05,060
‫something.

62
00:04:06,890 --> 00:04:07,850
‫Copy this one.

63
00:04:08,360 --> 00:04:09,380
‫Let me get back here.

64
00:04:10,490 --> 00:04:12,920
‫Space for the success saved this one.

65
00:04:12,950 --> 00:04:15,140
‫Get back, you can see on our screen.

66
00:04:16,170 --> 00:04:20,280
‫So I hope you got the idea how we are going to utilize these classes.

67
00:04:20,850 --> 00:04:24,630
‫Now we can control where we can say it's a for.

68
00:04:26,080 --> 00:04:32,440
‫And me out of here, save, get back now, it's much better in terms of visibility.

69
00:04:34,160 --> 00:04:41,210
‫So you have options you can use round it to have our radius, then you can control not of that tanks.

70
00:04:41,690 --> 00:04:43,220
‫So that's how this is going to work.

71
00:04:43,470 --> 00:04:47,450
‫I remember on right hand side, you can see all the topics regarding water.

72
00:04:48,080 --> 00:04:49,700
‫OK, let's jump on to color.

73
00:04:50,770 --> 00:04:57,310
‫Now here you will have options to collating with the help of these text, primary secondary success

74
00:04:57,310 --> 00:04:58,540
‫and few other content.

75
00:04:59,080 --> 00:05:03,880
‫So that's how this is going to work out, how you can see they have this yellow color, but they have

76
00:05:03,880 --> 00:05:07,690
‫utilized this big dog, so they have a dog background.

77
00:05:08,790 --> 00:05:10,910
‫I hope you got the idea about colors.

78
00:05:13,780 --> 00:05:19,330
‫Now, if I jump on to display, I have tons of other options, and the simplest thing is I can utilize

79
00:05:19,330 --> 00:05:22,030
‫any type of display just with their name.

80
00:05:22,210 --> 00:05:29,240
‫For example, if I need to utilize in line, I can use the dash in line if I need to use Block.

81
00:05:29,260 --> 00:05:31,120
‫I can use Dash Block.

82
00:05:31,450 --> 00:05:38,170
‫Similarly, if I need to utilize Flexbox, I just need to use the Dash Flex or if I need to use grep,

83
00:05:38,320 --> 00:05:40,240
‫I can use the Dash great.

84
00:05:40,870 --> 00:05:45,040
‫So there are tons of other and let's explore them later.

85
00:05:45,070 --> 00:05:48,560
‫I hope you got the idea what we are going to do with utility.

86
00:05:49,150 --> 00:05:50,130
‫OK, that's great.

87
00:05:50,140 --> 00:05:53,050
‫And we can write our own utility as we move forward.

88
00:05:53,830 --> 00:05:56,350
‫That's done for the basic example of utility.

89
00:05:56,710 --> 00:06:03,760
‫I strongly recommend after completion of these next three, four or five lectures, just jump and talk

90
00:06:03,760 --> 00:06:05,070
‫about each one of them.

91
00:06:05,080 --> 00:06:07,090
‫So we jump on to the next.

92
00:06:07,120 --> 00:06:10,740
‫You will get information about how you can just align text.

93
00:06:10,750 --> 00:06:19,240
‫If I say it started well from it will start from the right hand side and left hand side and then center

94
00:06:19,420 --> 00:06:19,990
‫center.

95
00:06:20,380 --> 00:06:26,170
‫Then we have other important topics and we will utilize them during the whole project.

96
00:06:26,920 --> 00:06:27,340
‫OK.

97
00:06:27,370 --> 00:06:29,920
‫This is great utility partners done.

98
00:06:30,460 --> 00:06:35,230
‫The next important part is this layout thing super important.

99
00:06:35,230 --> 00:06:39,970
‫And if you can understand this, almost all of your bootstrap content is done.

100
00:06:40,420 --> 00:06:42,910
‫OK, it's time for us to focus on Leo.

101
00:06:43,450 --> 00:06:46,240
‫So let's continue on this point from the next lecture.