Bootstrap Images

 BOOTSTRAP IMAGES

Bootstrap allows you to do a few useful things with images using CSS classes. These things include: making images responsive, converting images to shapes, and aligning images.

MAKING IMAGES RESPONSIVE

Images in Bootstrap are made responsive with the .img-fluid class. 

This applies max-width: 100%; and height: auto; to the image so that it scales with the parent width.

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

Can use .img-thumbnail to give an image a rounded 1px border appearance.

USING IMAGE SHAPES

Bootstrap 4 uses three different shape styles that can be applied to images:

·       img-rounded will add round corners to your image

·       img-circle will crop your image into a circle

·       img-thumbnail will add round corners and a border to make the image look like a thumbnail

Bootstrap 5 replaced the above classes with the classes given below.

 <img src="..." class="rounded" alt="..."><

img src="..." class="rounded-top" alt="...">

<img src="..." class="rounded-end" alt="...">

<img src="..." class="rounded-bottom" alt="...">

<img src="..." class="rounded-start" alt="...">

<img src="..." class="rounded-circle" alt="...">

<img src="..." class="rounded-pill" alt="...">

 

Rounded corner sizes range from 0 to 5                  

<img src="..." class="rounded-0" alt="...">

<img src="..." class="rounded-1" alt="...">

<img src="..." class="rounded-2" alt="...">

<img src="..." class="rounded-3" alt="...">

 

 

ALIGNING IMAGES

Align images with the helper float classes or text alignment classes. 

Block-level images can be centered using the .mx-auto margin utility class.

<img src="..." class="rounded float-start" alt="...">

<img src="..." class="rounded float-end" alt="...">

 <img src="..." class="rounded mx-auto d-block" alt="...">

<div class="text-center"> 

            <img src="..." class="rounded" alt="...">

</div>