1
00:00:00,150 --> 00:00:01,820
Now what I'm going to do is that I'm going to war.

2
00:00:01,830 --> 00:00:07,620
I'm going to be working on the section that's going to come after this, which is going to be which

3
00:00:07,620 --> 00:00:13,170
is going to be a bar here that's going to display brands, different brands from the brands that we

4
00:00:13,170 --> 00:00:14,280
have in our website.

5
00:00:14,760 --> 00:00:18,210
So here's what I'm going to do in the email.

6
00:00:18,660 --> 00:00:22,740
First, I'm going to add a comment and then I'm going to add the brand.

7
00:00:22,740 --> 00:00:25,530
I'm going to say brand because this is going to display the brands that we have.

8
00:00:26,250 --> 00:00:32,700
So for this section, I'm going to create a section and I'm going to give this section ID and the ID

9
00:00:32,940 --> 00:00:36,900
is going to be just brand and I'm going to give it also a class.

10
00:00:36,900 --> 00:00:39,270
The class is also going to be the container class.

11
00:00:43,060 --> 00:00:44,350
And inside that section.

12
00:00:45,720 --> 00:00:47,640
I want to display our all.

13
00:00:48,450 --> 00:00:49,890
I want you to say that.

14
00:00:51,270 --> 00:00:53,670
And then I'm going to give it a classical URL.

15
00:00:54,480 --> 00:01:01,350
So what Israel does is that it divides the page into rows and columns, and you can divide the page

16
00:01:01,350 --> 00:01:09,060
into columns, up to 12 columns, because bootstrap divides the page into 12 columns, and you can display

17
00:01:09,060 --> 00:01:17,250
something on on on each one of these columns, or you can let an item pick a specific number of columns.

18
00:01:17,670 --> 00:01:22,950
For example, you can divide the page into three columns where each column is going to, where each

19
00:01:22,950 --> 00:01:26,580
item is going to take four columns, a maximum of 12.

20
00:01:27,660 --> 00:01:28,830
And this is going to be clear.

21
00:01:28,830 --> 00:01:32,240
Once I finish here, I'm going to add images.

22
00:01:32,250 --> 00:01:38,250
So the first image I'm going to say here, image, and then I'm going to give this image a class first

23
00:01:38,370 --> 00:01:45,780
class called image fluid, which is going to make the image responsive.

24
00:01:45,930 --> 00:01:49,380
This is a bootstrap class.

25
00:01:49,860 --> 00:01:53,070
Next, I'm going to say column large.

26
00:01:54,470 --> 00:01:54,830
Three.

27
00:01:55,400 --> 00:02:04,400
So this is going to take to let the image take three columns out of 12, which means that for each single

28
00:02:04,400 --> 00:02:06,830
row, there will be four columns.

29
00:02:07,190 --> 00:02:12,090
There will be four calls because each one will take three, four medium screens.

30
00:02:12,120 --> 00:02:13,010
I'm going to say column.

31
00:02:13,400 --> 00:02:15,860
Medium for medium screens.

32
00:02:15,860 --> 00:02:18,950
I'm going to let each column take six.

33
00:02:20,270 --> 00:02:27,110
I'm going to let each image take six columns, which means that two images will be displayed third column

34
00:02:27,860 --> 00:02:32,930
or better, all four for small screens.

35
00:02:33,440 --> 00:02:41,180
I'm going to say 12, which means that only one image will be displayed in case the in case the screen

36
00:02:41,180 --> 00:02:48,970
is small, only one image will be displayed there and the source is going to be equal to assets four

37
00:02:48,980 --> 00:02:54,650
slash images and therefore slash the name of the image.

38
00:02:54,650 --> 00:03:03,110
So I'm going to say here I'm going to say here brand one the g big.

39
00:03:06,390 --> 00:03:07,650
And I'm going to copy this.

40
00:03:09,680 --> 00:03:15,380
And then we got a piece four times one, two, three, and we have four.

41
00:03:15,830 --> 00:03:22,400
So again, here, column large three means that each image will have three icons.

42
00:03:22,430 --> 00:03:28,370
Each image will take three columns, and since each image will take three columns and we can only have

43
00:03:28,370 --> 00:03:31,990
three, or we can only have 12 columns.

44
00:03:33,080 --> 00:03:35,750
There will be four images.

45
00:03:35,750 --> 00:03:43,400
There are if the screen is large, if the screen is medium six columns for each item, which means that

46
00:03:43,400 --> 00:03:45,260
two images will be displayed there.

47
00:03:45,890 --> 00:03:47,180
If the screen is small.

48
00:03:47,510 --> 00:03:48,920
Only one image will be displayed.

49
00:03:49,280 --> 00:03:50,030
Let me now save.

50
00:03:51,160 --> 00:03:52,540
And show you how it's going to look like.

51
00:03:53,410 --> 00:03:55,680
So here, as you can see, it's the bottom.

52
00:03:56,410 --> 00:04:01,240
But the problem is that they aren't being displayed here because I didn't I didn't add the images.

53
00:04:01,250 --> 00:04:02,380
Get me out of the images.

54
00:04:04,720 --> 00:04:06,700
So I'm going to open up the images folder.

55
00:04:07,170 --> 00:04:12,730
And when I have these images, I'm going to drag these images and drop them onto the images folder.

56
00:04:13,180 --> 00:04:15,520
So we have this and this.

57
00:04:16,600 --> 00:04:17,560
And this.

58
00:04:18,980 --> 00:04:19,700
And.

59
00:04:21,600 --> 00:04:22,230
This.

60
00:04:24,150 --> 00:04:25,950
One, two, three, four.

61
00:04:26,460 --> 00:04:27,300
So we have this.

62
00:04:36,440 --> 00:04:38,720
So we have four images we have for the loggers.

63
00:04:38,870 --> 00:04:42,110
These are the four loggers that I'm going to be displaying now.

64
00:04:42,890 --> 00:04:48,830
Now the names are brand one, brand two, brand three, brand four GAAP.

65
00:04:49,460 --> 00:04:57,920
So here you need to make sure that the names are brand one and then brand two and then brand three and

66
00:04:57,920 --> 00:04:59,030
then brand four.

67
00:04:59,660 --> 00:05:00,580
Done, JP.

68
00:05:01,920 --> 00:05:04,070
And now if I refresh.

69
00:05:05,270 --> 00:05:06,910
The images will be displayed like this.

70
00:05:06,920 --> 00:05:07,750
It looks amazing.

71
00:05:07,760 --> 00:05:16,810
As you can see, we have these brands and each brand will be displayed on I will take three columns.

72
00:05:16,820 --> 00:05:19,580
So this is three, three, three, three, which means 12.

73
00:05:20,210 --> 00:05:24,440
In case the screen is small, only one image will be displayed.

74
00:05:25,490 --> 00:05:29,270
In case the screen is medium, two images will be displayed.

75
00:05:30,080 --> 00:05:32,000
So this is the power of using bootstrap.

76
00:05:32,050 --> 00:05:37,340
It makes it gives you a control over what you want to display per raw and third column.