From the course: Bootstrap 5 Essential Training

Unlock this course with a free trial

Join today to access over 24,700 courses taught by industry experts.

Images and figures

Images and figures

- [Instructor] There's a few classes that can help you control how images and figures work. So let's take a look at those as well. All right, for images, you have a couple of different classes. One of them is img-fluid that will automatically let you build responsive images that adjust to the size of the viewport. It essentially sets the width of the image to 100% and the height to auto so that it scales with the parent container. There's a separate class called image thumbnail that creates a thumbnail image with a slide outline. I don't really use that one very often, but it does exist. So we can take a look at the difference right here. You can see that this image fluid just adjusts to the size of the container. So if I were to make the window smaller it would just be the size of the container. In this case my container happens to be the entire sort of viewport which right now, and a lot of times in these examples I actually have a hidden container around the entire screen just…

Contents