BS4 Images
Bootstrap 4 Image Shapes
Rounded Corners
An picture can have rounded corners by using the .rounded class:
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="rounded" alt="Cinque Terre" title="Bs4 Images 2" data-lazy-src="cinqueterre.jpg"><noscript><img decoding="async" src="cinqueterre.jpg" class="rounded" alt="Cinque Terre" title="Bs4 Images 2"></noscript>
Circle
The image is shaped into a circle with the .rounded-circle class:
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="rounded-circle" alt="Cinque Terre" title="Bs4 Images 3" data-lazy-src="cinqueterre.jpg"><noscript><img decoding="async" src="cinqueterre.jpg" class="rounded-circle" alt="Cinque Terre" title="Bs4 Images 3"></noscript>
Thumbnail
The .img-thumbnail class shapes the picture to a thumbnail (bordered):
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="img-thumbnail" alt="Cinque Terre" title="Bs4 Images 4" data-lazy-src="cinqueterre.jpg"><noscript><img decoding="async" src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" title="Bs4 Images 4"></noscript>
Aligning Images
Use the .float-right or .float-left classes to float an image to the right or left, respectively:
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="float-left" alt="Bs4 Images -" title="Bs4 Images 6" data-lazy-src="paris.jpg"><noscript><img decoding="async" src="paris.jpg" class="float-left" alt="Bs4 Images -" title="Bs4 Images 6"></noscript>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="float-right" alt="Bs4 Images -" title="Bs4 Images 7" data-lazy-src="paris.jpg"><noscript><img decoding="async" src="paris.jpg" class="float-right" alt="Bs4 Images -" title="Bs4 Images 7"></noscript>
Centered Image
You can add the utility classes to center an image. .d-block (display:block) and .mx-auto (margin:auto) to the image:
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" class="mx-auto d-block" alt="Bs4 Images -" title="Bs4 Images 9" data-lazy-src="paris.jpg"><noscript><img decoding="async" src="paris.jpg" class="mx-auto d-block" alt="Bs4 Images -" title="Bs4 Images 9"></noscript>
Responsive Images
There are several image sizes. Screens also do this. Images that are responsive change size on the fly to fit the screen.
By giving the <img> element a .img-fluid class, you may create responsive images. At that point, the image will smoothly scale to the parent element.
The picture has height: auto and max-width: 100%; applied to it by the .img-fluid class:
Example
<img decoding="async" class="img-fluid" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Chania" title="Bs4 Images 10" data-lazy-src="img_chania.jpg"><noscript><img decoding="async" class="img-fluid" src="img_chania.jpg" alt="Chania" title="Bs4 Images 10"></noscript>
