In this tutorial, you will learn about working with images in Bootstrap. You will learn to create responsive images, thumbnail images, circle images, image galleries, etc.
Contents
img Bootstrap
Images play an important role in any website, they hold users for a long and also provide valuable information. So your images on your website must be responsive and could fit all kinds of devices easily.
With Bootstrap, you can easily make your images responsive, and style in easily.
Table of Contents
Bootstrap Image ResponsiveRounded imageCircle imageImage ThumbnailAlign Image Left/RightBootstrap Image CenterBootstrap Image and Text Side by SideImage LinkFAQ
Bootstrap Responsive Image
Images make websites more attractive and informative, so you must make your image responsive.
All mages have some fixed width and height. If it is not styled properly then it overflows the screen of the device.
Bootstrap contains many predefined classes using which we can get any desired results. Use .img-fluid class on the image itself to make images responsive. After using this class image adjust its size according to different devices
The CSS property used in class .img-fluid are:
- max-width: 100%;
- height: auto;
Output:
The max-width CSS property restricts the image to overflow from the screen and the height of the image adjusts automatically which makes the image responsive.
Bootstrap Rounded Image
Using bootstrap you can also create a rounded image whose corners are round in shape. To make images have rounded corners use .rounded class on the image.
If you also want the image to be responsive, you must use the .img-fluid class explicitly with it.
The Bootstrap’s .rounded class CSS property is:
- border-radius: 0.25rem !important;
Bootstrap Circle Image
To make images circular use .rounded-circle class on the image.
If you want to also make your image responsive, you must use the .img-fluid class explicitly.
Bootstrap’s rounded-circle class property is:
- border-radius: 50% !important;
Bootstrap Thumbnail Class
To make your image look like a thumbnail use the .img-thumbnail class on the image. It creates a border, adds padding, rounds the image, and makes it responsive.
With the .img-thumbnail class, you need not add the .img-fluid class to make an image responsive.
The Bootstrap’s .img-thumbnail CSS class properties are:
- padding: 0.25rem;
- background-color: #fff; (white)
- border: 1px solid #dee2e6;
- border-radius: 0.25rem;
- max-width: 100%;
- height: auto;
Output:
Bootstrap Align Image Left/Right
In an article, you need some time to align your images, with Bootstrap you can do it easily.
To align the image left use .float-left class and to align the image right use .float-right class on the image.
Output:
Bootstrap Center Image
To align the image center use class .mx-auto and .d-block together on your image.
.mx-auto sets margin-left and margin-right to auto, while the .d-block class makes an image element to a block element (by default image is an inline element).
CSS properties of used classes are as follows:
- mx-auto :
- margin-left: auto !important;
- margin-right: auto !important;
- d-block :
- display: block !important;
Another way to align the image center is using an image inside a ‘div’ element with a class text-center.
Output:
Bootstrap image and text side by side
On most websites, you would have seen image and text side by side where text and image explain each other and looks very cool.
To create image and text side by side use the grid system property of bootstrap and create 2 columns of span 6-6.
Put your image in one column and your text in another. On smaller devices, it will automatically align vertically. See the example below.
Output:
Bootstrap Image Link
To create an image link put your image in an anchor tag and set URL as href value. You can also set .img-fluid or .img-thumbnail to the image.
Frequently asked questions
-
What is responsive Image in bootstrap?
Responsive images are those which adjust their size automatically according to device-width and never overflows out of screen size.
-
how to make image rounded in bootstrap?
Add .rounded class to your image.
-
How do I circle an image in bootstrap?
Add a .rounded-circle class to your image.