How to style images

Bootstrap allows you to do a few useful things with images through the use of CSS classes. These things include: making images responsive, converting images to shapes, and aligning images. In the next section, I'll show you how to apply all these techniques to your images.

Making images responsive

Bootstrap 4 comes with a new responsive image class that is super-handy when developing websites or web-based applications. When applying the class img-fluid to an <img> tag, it will automatically set the max-width of the image to 100% and the height to auto. The result will be an image that scales with the size of the device viewport. Here's what the code looks like:

<img src="myimage.jpg" class="fluid-image" alt="Responsive Image"> ...

Get Bootstrap 4 – Responsive Web Design now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.