1
00:00:02,420 --> 00:00:04,689
So here we added this carousel,

2
00:00:04,689 --> 00:00:05,523
and it's working,

3
00:00:05,523 --> 00:00:08,820
but it's huge and it's not having the styling

4
00:00:08,820 --> 00:00:10,633
we generally wanna have.

5
00:00:11,710 --> 00:00:14,880
Now you might find more Bootstrap classes,

6
00:00:14,880 --> 00:00:18,850
which you could use to change the size,

7
00:00:18,850 --> 00:00:22,160
maybe also if you have a look at the utility classes

8
00:00:22,160 --> 00:00:25,300
where there are certain classes that can help you

9
00:00:25,300 --> 00:00:27,580
with positioning and so on,

10
00:00:27,580 --> 00:00:30,180
but you can also just write your own code,

11
00:00:30,180 --> 00:00:31,970
because that's still allowed.

12
00:00:31,970 --> 00:00:35,950
And not just that, it's also totally common.

13
00:00:35,950 --> 00:00:38,530
If you use third-party packages,

14
00:00:38,530 --> 00:00:41,390
it does not mean that you only use them.

15
00:00:41,390 --> 00:00:46,000
It means that you might use them and also add your own code

16
00:00:46,000 --> 00:00:49,600
to add certain behavior or styling

17
00:00:49,600 --> 00:00:52,573
that's not built into the third-party package.

18
00:00:54,090 --> 00:00:58,210
So here I'll add a styles.css file

19
00:00:58,210 --> 00:01:00,833
where I can now write my own CSS code.

20
00:01:01,780 --> 00:01:05,570
And that file will be included in index.html.

21
00:01:05,570 --> 00:01:08,621
and I will include it after this Bootstrap link,

22
00:01:08,621 --> 00:01:10,670
after that link,

23
00:01:10,670 --> 00:01:14,730
so that I could potentially overwrite the Bootstrap styles

24
00:01:14,730 --> 00:01:16,380
with my own CSS code,

25
00:01:16,380 --> 00:01:19,200
because if my CSS code gets loaded second,

26
00:01:19,200 --> 00:01:21,290
it will have a higher priority

27
00:01:21,290 --> 00:01:25,020
and it could override some styles set by Bootstrap,

28
00:01:25,020 --> 00:01:28,123
in case I'm not happy with some of the built-in styles.

29
00:01:28,990 --> 00:01:31,210
Here, I'll not even do that,

30
00:01:31,210 --> 00:01:35,043
but I will just load this styles.css file like this.

31
00:01:35,980 --> 00:01:38,220
And now with that loaded,

32
00:01:38,220 --> 00:01:42,270
if we go down here to this carousel,

33
00:01:42,270 --> 00:01:44,870
which we added here,

34
00:01:44,870 --> 00:01:47,030
we see that it has an ID.

35
00:01:47,030 --> 00:01:50,260
And that's actually not an ID we have to keep like this.

36
00:01:50,260 --> 00:01:51,540
We can change it.

37
00:01:51,540 --> 00:01:52,500
If we change it,

38
00:01:52,500 --> 00:01:54,250
we just also have to be careful

39
00:01:54,250 --> 00:01:56,310
that we change it in all the places

40
00:01:56,310 --> 00:01:58,130
where it might be mentioned.

41
00:01:58,130 --> 00:02:00,970
And we see it being mentioned down here.

42
00:02:00,970 --> 00:02:02,906
Now this is a data attribute,

43
00:02:02,906 --> 00:02:06,910
which we learned about in that last course section

44
00:02:06,910 --> 00:02:10,163
where we added this little game, Tic Tac Toe.

45
00:02:11,000 --> 00:02:12,630
In case you skipped it,

46
00:02:12,630 --> 00:02:15,540
data attributes are regular attributes

47
00:02:15,540 --> 00:02:18,310
that all start with data dash,

48
00:02:18,310 --> 00:02:22,110
and they're after any attribute name of your choice.

49
00:02:22,110 --> 00:02:24,480
And they don't do anything by default,

50
00:02:24,480 --> 00:02:27,630
but you can pick them up in your JavaScript code,

51
00:02:27,630 --> 00:02:29,930
and for example, look for elements

52
00:02:29,930 --> 00:02:32,120
that have a certain data attribute

53
00:02:32,120 --> 00:02:35,160
or use those attributes to store data,

54
00:02:35,160 --> 00:02:38,550
which you then read and use in your JavaScript code.

55
00:02:38,550 --> 00:02:39,810
And here, for example,

56
00:02:39,810 --> 00:02:42,209
Bootstrap uses such a data attribute

57
00:02:42,209 --> 00:02:45,890
to connect this button with the overall carousel

58
00:02:45,890 --> 00:02:47,890
so that it internally,

59
00:02:47,890 --> 00:02:50,330
in the Bootstrap JavaScript code,

60
00:02:50,330 --> 00:02:54,350
knows which HTML element holds your carousel,

61
00:02:54,350 --> 00:02:57,043
which will be important for swapping the images.

62
00:02:57,940 --> 00:02:59,800
So if we change that id here,

63
00:02:59,800 --> 00:03:02,305
we should also change it in those data attributes

64
00:03:02,305 --> 00:03:05,450
as they seem to be referencing it.

65
00:03:05,450 --> 00:03:09,320
And here I'll name this carousel-example

66
00:03:09,320 --> 00:03:10,788
and then just copy that

67
00:03:10,788 --> 00:03:14,150
and replace that here after this hash

68
00:03:14,150 --> 00:03:16,600
to make sure that Bootstrap JavaScript

69
00:03:16,600 --> 00:03:18,293
still works correctly.

70
00:03:19,350 --> 00:03:20,800
And in case you think

71
00:03:20,800 --> 00:03:24,010
that this is something I just spotted by accident here,

72
00:03:24,010 --> 00:03:27,360
no, of course, things like that are also documented.

73
00:03:27,360 --> 00:03:30,870
If you dive into the documentation for the carousel,

74
00:03:30,870 --> 00:03:33,360
you'll learn, if you read through it entirely,

75
00:03:33,360 --> 00:03:37,363
that those data-bs-target attributes are important.

76
00:03:40,140 --> 00:03:44,490
So here with that, I'm now using carousel-example.

77
00:03:44,490 --> 00:03:47,480
And I did that, because now in my own CSS code,

78
00:03:47,480 --> 00:03:51,690
I can target this with the id CSS selector,

79
00:03:51,690 --> 00:03:54,640
and we can now change the styling here.

80
00:03:54,640 --> 00:03:56,140
We can, for example,

81
00:03:56,140 --> 00:04:00,190
set the width to, let's say, 100%,

82
00:04:00,190 --> 00:04:02,300
but give it a max width of 50rem

83
00:04:03,920 --> 00:04:08,120
and give it a height of, let's say, 30rem

84
00:04:08,120 --> 00:04:09,233
or anything like that.

85
00:04:10,520 --> 00:04:14,010
And now if we save that and reload,

86
00:04:14,010 --> 00:04:18,790
now we got a carousel that has a better sizing.

87
00:04:18,790 --> 00:04:21,873
However, now the button here doesn't work,

88
00:04:23,990 --> 00:04:26,850
yeah, because I had more data-bs-targets

89
00:04:26,850 --> 00:04:30,060
that needed to be updated, also down there.

90
00:04:30,060 --> 00:04:32,890
We should, of course, use carousel-example

91
00:04:32,890 --> 00:04:34,510
for these buttons

92
00:04:34,510 --> 00:04:36,650
so that we really update this id

93
00:04:36,650 --> 00:04:40,000
in all the places where it's being referenced.

94
00:04:40,000 --> 00:04:45,000
But now with that, if we reload again, we can scroll here.

95
00:04:45,430 --> 00:04:48,660
Now you'll see that the image sizes are still changing

96
00:04:48,660 --> 00:04:50,650
and that it's not centered,

97
00:04:50,650 --> 00:04:52,618
but of course that's something we can change as well.

98
00:04:52,618 --> 00:04:54,040
We can center this

99
00:04:54,040 --> 00:04:57,480
by giving this a margin of maybe 2rem, top and bottom,

100
00:04:57,480 --> 00:04:59,253
and then auto left and right.

101
00:05:00,300 --> 00:05:01,750
And for the images,

102
00:05:01,750 --> 00:05:03,500
we can simply target the images

103
00:05:03,500 --> 00:05:05,960
which are inside of our carousel

104
00:05:05,960 --> 00:05:10,960
and make sure that they are not randomly changing sizes.

105
00:05:11,040 --> 00:05:16,040
And we can do that by targeting carousel-example

106
00:05:16,300 --> 00:05:19,410
and then any image that is in there.

107
00:05:19,410 --> 00:05:24,410
And here, we then simply give that a fixed height of 30rem,

108
00:05:24,430 --> 00:05:25,993
so this height here.

109
00:05:27,830 --> 00:05:29,180
And if we now save that,

110
00:05:30,310 --> 00:05:33,320
you actually see that now images have the same height.

111
00:05:33,320 --> 00:05:34,840
We now just always want to make sure

112
00:05:34,840 --> 00:05:36,371
that they don't get distorted

113
00:05:36,371 --> 00:05:40,270
by adding object-fit: cover on them,

114
00:05:40,270 --> 00:05:43,480
which ensures that their aspect ratio is kept

115
00:05:43,480 --> 00:05:45,750
and they are simply cropped.

116
00:05:45,750 --> 00:05:48,180
And now we have this carousel here

117
00:05:48,180 --> 00:05:49,310
and we could add more.

118
00:05:49,310 --> 00:05:50,830
We could add rounded borders.

119
00:05:50,830 --> 00:05:53,660
We could add a box shadow, whatever we need.

120
00:05:53,660 --> 00:05:55,490
And most importantly,

121
00:05:55,490 --> 00:05:58,959
we see that we can still write our own CSS code

122
00:05:58,959 --> 00:06:03,540
to change the elements which are also controlled

123
00:06:03,540 --> 00:06:06,570
and partially styled by Bootstrap.

124
00:06:06,570 --> 00:06:09,364
And that's a totally normal thing to do.

125
00:06:09,364 --> 00:06:11,760
It's not either/or,

126
00:06:11,760 --> 00:06:14,720
but instead often you can get the best of both worlds

127
00:06:14,720 --> 00:06:18,990
and combine third-party package code with custom code

128
00:06:18,990 --> 00:06:20,493
as we're doing it here.