Bootstrap 4 Images
Bootstrap 4 Image Shapes
Rounded Corners:
Circle:
Thumbnail:
Rounded Corners
The .rounded class adds rounded corners to an image:
Circle
The .rounded-circle class shapes the image to a circle:
Thumbnail
The .img-thumbnail class shapes the image to a thumbnail
(bordered):
Aligning Images
Float an image to the right with the .float-right class or to the left with .float-left:
Example
<img src="paris.jpg" class="float-left">
<img src="paris.jpg"
class="float-right">
Try it Yourself »
Centered Image
Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block) to the image:
Responsive Images
Images come in all sizes. So do screens. Responsive images automatically adjust to fit the size of the screen.
Create responsive images by adding an .img-fluid class
to the <img> tag. The image will then scale nicely to the parent element.
The .img-fluid class applies max-width: 100%; and
height: auto; to the image:
What is aspect ratio?
The aspect ratio of an image
describes the proportional relationship between its width and its height. Two common video aspect ratios are 4:3
(the universal video format of the 20th
century), and 16:9 (universal for HD television and European digital
television).
You can choose between two aspect ratio classes:
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Try it Yourself »
Complete Bootstrap 4 Image Reference
For a complete reference of all image classes, go to our complete Bootstrap 4 Image Reference.
-->