Bootstrap 3 Essential Training, Adding image classes

Bootstrap has a lot of really useful classes that can help you tame your images. So let’s go ahead and take a look at some of them. Now you can see from this example that some of these are a little bit too big for their column widths.

Bootstrap can make those images more responsive if you add an img-responsive class. Let’s go ahead and do that. So right before our alt tag, I want to add class and I’m going to say img-responsive. Save that, and you can see that this one adjusts.

So what’s actually happening is that Bootstrap is applying some styles that is going to set the max width of this image to 100% so no matter what width I make my browser, you should see it fill the parent column.  

Now this image is only about 450 pixels wide or so. So when I make it a little smaller at this layout you’ll see that it doesn’t go the full width of the screen. But if it had more resolution, it would definitely do that. It also sets the height to auto as well as the display to block for any element. Now because of this, if you want to center.

Leave a Reply

Notify of