Bootstrap 4 Image Shapes
Rounded Corners:

Circle:

Thumbnail:

Rounded Corners
The
.rounded
class adds rounded corners to an image:Example
<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Circle
The
.rounded-circle
class shapes the image to a circle:Example
<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
Thumbnail
The
.img-thumbnail
class shapes the image to a thumbnail (bordered):Example
<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
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">
Centered Image
Center an image by adding the utility classes
.mx-auto
(margin:auto) and .d-block
(display:block) to the image:
Example
<img src="paris.jpg" class="mx-auto d-block">
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:Example
<img class="img-fluid" src="img_chania.jpg" alt="Chania">
0 Comments