The carousel slides should match the gallery images and must be in the same order.The carousel ID should match the data-target of the images in the gallery.The modal ID should match the data-target of the gallery element.Here’s some important parts to watch for though: Pretty much a straight copy-and-paste job from the Bootstrap documentation. We’re just nesting one inside the other here. This is a carousel inside a modal, both of which are standard Bootstrap components. Interested in knowing more about data attributes? Check out the CSS-Tricks guide to them. Here’s what we get when we put that together: The values for data-slide-to are based on the order of the images. Later on, we’ll want to use the data-target value ( #carouselExample) as the ID for the carousel, so note that for when we get there. We could add those to the image wrappers instead, but we’ll go with the images in this post. Let’s add data-target="#carouselExample" and a data-slide-to attribute to each image.We should also add the data-target value ( #exampleModal) as the ID of the modal itself, but we’ll do that once we get to the modal markup. This makes it so clicking anything in the gallery opens the modal. We’ll add data-toggle="modal" and data-target="#exampleModal" to the parent element (#gallery).In this case, we’ll be creating interactions that open the modal component and allow scrolling through the images using the carousel component. Bootstrap looks at data attributes to figure out which elements should be interactive and what they should do. Now we need data attributes to make those images interactive. We can use Bootstrap’s grid system for that. Let’s start with the markup for a grid layout of images.