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.