HOME C C++ PYTHON JAVA HTML CSS JAVASCRIPT BOOTSTRAP JQUERY REACT PHP SQL AJAX JSON DATA SCIENCE AI

Bootstrap 5 Images

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 left with the .float-start class or to the right with .float-end:

Example

<img src="paris.jpg" class="float-start">
<img src="paris.jpg" class="float-end">