So here we added this carousel,
and it's working,
but it's huge and it's not having the styling
we generally wanna have.
Now you might find more Bootstrap classes,
which you could use to change the size,
maybe also if you have a look at the utility classes
where there are certain classes that can help you
with positioning and so on,
but you can also just write your own code,
because that's still allowed.
And not just that, it's also totally common.
If you use third-party packages,
it does not mean that you only use them.
It means that you might use them and also add your own code
to add certain behavior or styling
that's not built into the third-party package.
So here I'll add a styles.css file
where I can now write my own CSS code.
And that file will be included in index.html.
and I will include it after this Bootstrap link,
after that link,
so that I could potentially overwrite the Bootstrap styles
with my own CSS code,
because if my CSS code gets loaded second,
it will have a higher priority
and it could override some styles set by Bootstrap,
in case I'm not happy with some of the built-in styles.
Here, I'll not even do that,
but I will just load this styles.css file like this.
And now with that loaded,
if we go down here to this carousel,
which we added here,
we see that it has an ID.
And that's actually not an ID we have to keep like this.
We can change it.
If we change it,
we just also have to be careful
that we change it in all the places
where it might be mentioned.
And we see it being mentioned down here.
Now this is a data attribute,
which we learned about in that last course section
where we added this little game, Tic Tac Toe.
In case you skipped it,
data attributes are regular attributes
that all start with data dash,
and they're after any attribute name of your choice.
And they don't do anything by default,
but you can pick them up in your JavaScript code,
and for example, look for elements
that have a certain data attribute
or use those attributes to store data,
which you then read and use in your JavaScript code.
And here, for example,
Bootstrap uses such a data attribute
to connect this button with the overall carousel
so that it internally,
in the Bootstrap JavaScript code,
knows which HTML element holds your carousel,
which will be important for swapping the images.
So if we change that id here,
we should also change it in those data attributes
as they seem to be referencing it.
And here I'll name this carousel-example
and then just copy that
and replace that here after this hash
to make sure that Bootstrap JavaScript
still works correctly.
And in case you think
that this is something I just spotted by accident here,
no, of course, things like that are also documented.
If you dive into the documentation for the carousel,
you'll learn, if you read through it entirely,
that those data-bs-target attributes are important.
So here with that, I'm now using carousel-example.
And I did that, because now in my own CSS code,
I can target this with the id CSS selector,
and we can now change the styling here.
We can, for example,
set the width to, let's say, 100%,
but give it a max width of 50rem
and give it a height of, let's say, 30rem
or anything like that.
And now if we save that and reload,
now we got a carousel that has a better sizing.
However, now the button here doesn't work,
yeah, because I had more data-bs-targets
that needed to be updated, also down there.
We should, of course, use carousel-example
for these buttons
so that we really update this id
in all the places where it's being referenced.
But now with that, if we reload again, we can scroll here.
Now you'll see that the image sizes are still changing
and that it's not centered,
but of course that's something we can change as well.
We can center this
by giving this a margin of maybe 2rem, top and bottom,
and then auto left and right.
And for the images,
we can simply target the images
which are inside of our carousel
and make sure that they are not randomly changing sizes.
And we can do that by targeting carousel-example
and then any image that is in there.
And here, we then simply give that a fixed height of 30rem,
so this height here.
And if we now save that,
you actually see that now images have the same height.
We now just always want to make sure
that they don't get distorted
by adding object-fit: cover on them,
which ensures that their aspect ratio is kept
and they are simply cropped.
And now we have this carousel here
and we could add more.
We could add rounded borders.
We could add a box shadow, whatever we need.
And most importantly,
we see that we can still write our own CSS code
to change the elements which are also controlled
and partially styled by Bootstrap.
And that's a totally normal thing to do.
It's not either/or,
but instead often you can get the best of both worlds
and combine third-party package code with custom code
as we're doing it here.