Bootstrap 4 images tutorial includes learning to create responsive images, shape images, and alignment of images to the required position.
Let’s start with creating responsive images below.
Bootstrap 4 Responsive Images
Responsive images are the images that resize themselves according to the size of the parent element. To create responsive images in Bootstrap 4, you have to use the class .img-fluid to the <img> elements. It adds a max-width of 100% and the height for the element as auto as given below:
|
1 |
<img src="bridge-demo.jpg" class="img-fluid" alt="Image"> |
Bootstrap 4 Image Shapes
You can shape images to convert them into three different styles like rounded, circle, and thumbnail images. Let’s find the classes with examples given below.
Rounded Images
The rounded images are the images that have rounded corners. You can use the Bootstrap 4 class .rounded to give images a rounded corner as given below:
|
1 |
<img src="user1.jpg" class="rounded" alt="Image"> |
Output
You can test the above example live to see the rounded corner images.
Circle Images
The circle images are images that are in circular shapes. You can use the Bootstrap 4 class .rounded-circle to give images a circular rounded shape as given below:
|
1 |
<img src="bridge-demo.jpg" class="rounded-circle" alt="Image"> |
Output
Thumbnail Images
The thumbnail images are the images that have a rounded 1px border appearance. You can use the Bootstrap 4 class .img-thumbnail to create a thumbnail image as given in the example below:
|
1 |
<img src="user1.jpg" class="img-thumbnail" alt="Image"> |
Output
You can text the above example live to see the thumbnail images.
Bootstrap 4 Image Alignment
In addition to the above styles, you can also align images according to the required positions. Let’s find out how to align images to right, left, and center positions.
Left Alignment
The left alignment aligns the image to the left position. You can use the Bootstrap 4 class .float-left to left-align the image as given in the example below:
|
1 |
<img src="bridge-demo.jpg" class="float-left" alt="Image"> |
Right Alignment
The right alignment aligns the image to the right position. You can use the Bootstrap 4 class .float-right to right-align the image as given in the example below:
|
1 |
<img src="bridge-demo.jpg" class="float-right" alt="Image"> |
Center Alignment
The center alignment aligns the image to the center position. You have to use the Bootstrap 4 class .mx-auto and .d-block to center align the image as given in the example below:
|
1 |
<img src="bridge-demo.jpg" class="mx-auto d-block" alt="Image"> |
Overall Bootstrap 4 Image Classes Summary
Below is the list of complete classes that you have learned above in this Bootstrap 4 images tutorial:
| Sr. No. | Bootstrap 4 Class | Purpose | Text Live Example |
|---|---|---|---|
| 1 | .img-fluid |
Responsive image | Test it Live |
| 2 | .rounded |
Rounded image | Test it Live |
| 3 | .rounded-circle |
Rounded circular image | Test it Live |
| 4 | .img-thumbnail |
Thumbnail image | Test it Live |
| 5 | .float-left |
Left aligned image | Test it Live |
| 6 | .float-right |
Right aligned image | Test it Live |
| 7 | .mx-auto and .d-block |
Center aligned image | Test it Live |