Reader small image

You're reading from  Learning Bootstrap 4 - Second Edition

Product typeBook
Published inAug 2016
Reading LevelIntermediate
PublisherPackt
ISBN-139781785881008
Edition2nd Edition
Languages
Right arrow
Author (1)
Matt Lambert
Matt Lambert
author image
Matt Lambert

Matt Lambert is a designer and developer with 15+ years of experience. He currently works full-time as a Senior Software Engineer for CA Technologies in Vancouver, BC, Canada. In his free time he is an author, artist, and musician. In 2005, Matt founded Cardeo Creative, which is a small web design studio based in Vancouver. He works with a select list of clients on a part-time basis while producing his own products on the side. To date, Matt has self-published 3 additional development books titled: Mastering Bootstrap, CSS3 Handbook, and the Freelance Startup Guide.
Read more about Matt Lambert

Right arrow

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"> 

It's as easy as adding that class to the image to trigger the responsive controls. A word of advice: I would recommend making your images a little bit bigger than the maximum size you think you will need. That way, the image will...

lock icon
The rest of the page is locked
Previous PageNext Page
You have been reading a chapter from
Learning Bootstrap 4 - Second Edition
Published in: Aug 2016Publisher: PacktISBN-13: 9781785881008

Author (1)

author image
Matt Lambert

Matt Lambert is a designer and developer with 15+ years of experience. He currently works full-time as a Senior Software Engineer for CA Technologies in Vancouver, BC, Canada. In his free time he is an author, artist, and musician. In 2005, Matt founded Cardeo Creative, which is a small web design studio based in Vancouver. He works with a select list of clients on a part-time basis while producing his own products on the side. To date, Matt has self-published 3 additional development books titled: Mastering Bootstrap, CSS3 Handbook, and the Freelance Startup Guide.
Read more about Matt Lambert