Images are essential part of a website because they convey a lot of information and make websites attractive. But adding images and making them responsive can be a tiring task using CSS.
Bootstrap 4 comes with predefined images classes for making our responsive.
img tag is used to include an image in our website. We can style this tag with the Bootstrap 4 classes that are categorized in terms of the functions they perform below:
.rounded: This adds rounded corners to our image.
.rounded-circle: This turns our images into a circle.
.thumbnail: This adds borders to our image thus shaping it into a thumbnail.
.float-right: This floats our image to the right.
.float-left: This floats it to the left.
Note: To place an image to the center, we use the utility classes
.img-fluidclass to the
height: autoto the image.
Immediately above is a rounded image placed at the center of a page.
imgwas included with the following classes:
.img-fluid- makes the image responsive.
.rounded-circle- shapes it into a circle.
.d-block- centered the image.
srcspecifies the image source while the
altattribute is an alternative text of the image in case the source is not found.
View all Courses