Bootstrap 4 Images

❮ Previous Next ❯

Bootstrap 4 Image Shapes

Rounded Corners:

Paris

Circle:

NYC

Thumbnail:

San Fran

Rounded Corners

The .rounded class adds rounded corners to an image:

Example

<img src="cinqueterre.jpg" class="rounded" alt="Cinque Terre">
Try it Yourself »

Circle

The .rounded-circle class shapes the image to a circle:

Example

<img src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre">
Try it Yourself »

Thumbnail

The .img-thumbnail class shapes the image to a thumbnail (bordered):

Example

<img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre">
Try it Yourself »

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:

Example

<img src="paris.jpg" class="mx-auto d-block">
Try it Yourself »

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">
Try it Yourself »

❮ Previous Next ❯
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.