Use Bootstrap to Build a Rotating Carousel of Images

[00:00] Create a section with an ID of carousel. Next, create a div with a class of container as we don't want it to stretch the whole width of the screen like we did with the jumbotron, and add a top margin of 5. To turn this into a carousel, simply add the class of Carousel. [00:20] Make another div with a class of carousel dash enter. This will stop it from overlapping with the content below it as well as hold all of our images. Add a div with a class of carousel item. Inside of that, add an [00:40] image element. Duplicate this twice, but the first div must have an additional class of active. [01:01] For the images, add them from the images I've supplied in the carousel folder, and don't forget to add your alts. Now that we have some items in here, up in the container div, add data dashbsdashride equals carousel. This will auto start our [01:21] carousel. Also, give it a class of slide to smooth out that transition. There are tons of different options for transitions, and you can customize it yourself if you would like. I'll have you linked down in the description to the docs for more info. You can kind of see that we have some images that are sliding on their own. They're obviously too large, so let's [01:41] add in some styling for these images. Give each of the images a height of 400 and make the images span the width of the carousel using width dash 100. They need object dash fit dash cover so that they aren't stretched and rounded to round the corners. Also make sure to add rounded to the div with the [02:01] class of carousel inner. If we didn't add rounded to both, we would see the pointed image corners on each transition. We now have a fully functioning carousel with rotating beautiful images.