Images
Responsive images
Images in Bootstrap are made responsive with
.img-fluid
. max-width: 100%;
and
height: auto;
are applied to the image so that it scales with the parent element.
![](assets/images/widgets/1.jpg)
Image thumbnails
You can use .img-thumbnail
to give an image a rounded.
![](assets/images/users/user-4.jpg)
Kathryn Money
UI & UX Designer, Japan
Image rounded
You can use .rounded
to give an image a rounded.
![](assets/images/users/user-5.jpg)
Anthony Stover
UI & UX Designer, USA
Image circle
You can use .rounded-circle
to give an image a circle.
![](assets/images/users/user-6.jpg)
Catherine Orman
UI & UX Designer, India
Aligning images
You can use .float-right
and .float-left
to give an image position.
![](assets/images/users/user-4.jpg)
![](assets/images/users/user-10.jpg)
Aligning images
You can use .d-block .mx-auto
image center.
![](assets/images/users/user-7.jpg)