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>