In this video, Ray Villalobos looks at the classes that help you deal with images—which have have changed in version 4—as well as new classes for figures in Bootstrap.
- [Instructor] Bootstrap also has some very useful classes that help you work with images, as well as with figures. So let's go ahead and take a look at what that looks like. Now first of all, we have the img-fluid class, which will give you responsive images. That means that if you add this class to an image it's going to adjust to be the width of the container. And therefore it'll also respond to that container's size, so if you're using columns or if you're using just a container or container fluid, it's going to just resize to the width of those containers.
And that's one of the more useful classes in Bootstrap. There's a bunch of ways also to control the roundness of your images, the rounded class adds a very mild round edge to images. And you can also control the direction of the roundness, so you can say rounded and then a direction which can be top, right, bottom, left, and that will give you some images that are rounded only at the top, right, bottom, or left. Of course, in addition to that, you can say rounded-circle, and that will make an oval shaped image.
If the image happens to be square, then it will actually give you a circle. Finally, if the image already has some roundness applied to it, you can specify a class of rounded-0 and it's going to take out the roundness of that image if it has round edges, so the border radius would be cleared out. There's another alternative style and this is pretty much a historic style that Bootstrap has had. If you add a class of img-thumbnail then you're going to get, essentially, a slightly rounded image with also a one pixel border around the image with a little bit of space.
We'll take a look at that also in a minute. You can also align images. By default, images are considered to be inline elements, so you can float them by using the class of float-left or the float-right class of course, to the direction that you want. Because it is an inline image, when you want to center an image you could just put a text-center class on the container, and it will center, obviously, not just the image, but also the text. And, in addition to that, if you define that an image needs to be a block element, then you can use the mx-auto class, and it will center the block, which in this case is the images.
You can also use figures, they're pretty fun and easy to use. All you do is just with the block quotes you add classes that kind of match the tags. So you can add the figure class on the figure tag, and it just gives it a slightly different look. You also can add a figure-img on the images inside the figures, that's going to give it the right amount of spacing inside the figures. And of course in the fig-caption tag that would go in your figures, you can add a figure-caption class on the text, and again it just gives it the right amount of spacing for it to work well within the figure.
So let's take a look at how some of these work. So I've got a pretty simple layout here, it's a bunch of figures with an image right here at the top, and then a fig caption. You can see there's a bunch of them. So right now, obviously, these images are way too big, they're way too wide for the captions. One of the things that we can do is just add a class, so let's go ahead and choose all these images. And then we'll add a class of img-fluid.
And what that will do is it'll just make them responsive. So you can see that this one looks great, and as I go through the different widths and breakpoints, that image is going to resize, actually all of them are resizing. All right, so that looks pretty cool. If you want rounded edges on an image, then we can add a class, I'll just do it to this top one, of rounded. And you can barely see it, there's a little bit of a roundness on the edge of this image right here.
It's very subtle, but I think it looks pretty cool. Sometimes I think it looks better than just these square edges. You can add a direction if you want to, so you can say rounded-top, and only the top of that image is rounded, you can see the bottom are still square. And you can also, of course, do top, right, bottom, left. You can also do rounded-circle. Because this image is in square, it's going to show it to you as an oval. And let's go ahead and make that smaller and bigger, that's actually a pretty nice option that you have right there.
If the images happen to have a default sort of roundness, so say we add a style tag here. And we'll just change all the images, we'll change the border-radius here to 20 pixels, just to make it bigger. And let's go ahead and get rid of this rounded-circle. So now all the images have a 20 pixel round edge, except that if I want to overwrite that I can say rounded-0 on just that image, and now this one will be square.
So if I have that default, I can sort of clear it out with this rounded-0. I can also float images to the right or to the left, but to do that I'm going to need to set a width here. So let's make this, say, 200 pixels on all the images, just so that they're a little bit smaller in the layout. We can get rid of this rounded edge. If I want to float these images, I can add a float-left here and now this image will be floated to the left, I probably need to add some padding here.
Or I can float it to the right, it'll put it on the right. And if I want to center the images, I can put in a class of text-center here, it's going to center the text. Let's go ahead and get rid of this float-right. It centers everything, including that image. You can also specify that an image is of display blocks. Some layouts you may want your images to sort of be this display block, instead of display inline, and to do that, instead of text-center you would need to use a separate class called mx-auto, and now that would center the image.
So it just depends on what you're doing with your design, sometimes you specify images to be block elements, sometimes it's better if you have them as just regular inline elements. So, finally, let's go ahead and take a look at the figures. Let's go ahead and get rid of some of this stuff. So we'll leave the width of 200 for right now, we may change that in a bit, we'll take out this img-fluid. We'll leave the class because we're going to change it in just a minute. And let's go ahead and get rid of text-center as well.
All right, so these look OK, let's go ahead and add the class of figure, so we could do that if we want to. It's not really going to modify that well, but if we add a class here of figure-img, then it kind of gives you a little bit more room here between the figure and the paragraph. And then on the figcaption we can add a class of figure-caption, and that's just going to modify it a little bit, it makes it a little bit lighter, and it just makes it fit nicely underneath everything else.
Let's go ahead and add an img-fluid if we want to, and let's take out this style. And now this image kind of goes the full width of the browser, which I think looks nice for this figure. And we could do that with all the other ones as well. But that gives you an idea of how these work. I like the styles for the figures, it makes them a little bit different than the rest of the text, it's like a little bit smaller, and sort of a different color. And just by adding these classes you get a nice looking sort of section that has a photo as well as a caption underneath that.
Bootstrap creates a lot of classes to help you improve the way things look. Even though we do have a built-in figure tag in HTML, it doesn't look that great. So I like that some of the default classes in Bootstrap just makes everything immediately look better than the defaults that you get just with the browser classes.
- Creating a basic template
- Reviewing basic styles and typography
- Using colors with Bootstrap
- Working with classes that help you deal with images
- Working with grid containers
- Offsetting columns
- Using list groups to style lists, buttons, and links
- Using breadcrumbs
- Reviewing layout components
- Using form styles
- Working with interactive components