In today’s tutorial, we will see how to use responsive image in bootstrap 5. For this section we will see responsive image, bootstrap 5 image thumbnail, image shape . first you need to setup bootstrap 5 project. you can use cdn or read below article.
How to install & setup bootstrap 5
Bootstrap 5 Responsive Image Example
1. You can use .img-fluid class to made responsive image. it will applies max-width: 100%; and height: auto; to the image so that it scales with the parent element.
<img src="https://cdn.pixabay.com/photo/2016/04/25/14/15/man-1352025__340.png" class="img-fluid" alt="image responsive">
bootstrap 5 responsive image
2. You can also use .img-thumbnail to responsive image. .img-thumbnail class give an image a rounded 1px border appearance.
<img src="https://cdn.pixabay.com/photo/2016/04/25/14/15/man-1352025__340.png" class="img-thumbnail"
alt="image responsive">
bootstrap 5 responsive img thumbnail
3. You can also use border class to modify image thumbnail class.
<img src="https://cdn.pixabay.com/photo/2016/04/25/14/15/man-1352025__340.png" class="img-thumbnail border-primary"
alt="image responsive">
<img src="https://cdn.pixabay.com/photo/2016/04/25/14/15/man-1352025__340.png" class="img-thumbnail border-warning"
alt="image responsive">
<img src="https://cdn.pixabay.com/photo/2016/04/25/14/15/man-1352025__340.png" class="img-thumbnail border-danger"
alt="image responsive">
bootstrap 5 image thumbnail with border style
4. Bootstrap 5 responsive image shape with circle image, rounded image, pill image.
<img src="https://cdn.pixabay.com/photo/2016/04/25/14/15/man-1352025__340.png"
class="img-thumbnail border-danger rounded" alt="image responsive">
<img src="https://cdn.pixabay.com/photo/2016/04/25/14/15/man-1352025__340.png" class="img-thumbnail rounded-pill"
alt="image responsive">
<img src="https://cdn.pixabay.com/photo/2016/04/25/14/15/man-1352025__340.png"
class="img-thumbnail rounded-circle border-primary" alt="image responsive">
bootstrap 5 image shape
