The .rounded class adds rounded corners to an image:
| Attribute / Tag | Full Form | Description / Use | Example |
|---|---|---|---|
<img> |
Image | Used to display an image in the webpage. | <img src="144.png" alt="sample"> |
src |
Source | Specifies the image file path or URL. | src="144.png" |
alt |
Alternative Text | Text shown if image fails to load. Improves accessibility. | alt="Sample image" |
The. .rounded-circle class shapes the image to a circle:
The .img-thumbnailclass shapes the image to a thumbnail (bordered):
Float an image to the left with the .float-startclass or to the right with .float-end
Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block) to the image:
Images have various dimensions, and so do screens. Responsive images adapt themselves automatically to match the screen size.
Make images responsive by using the .img-fluid class on the <img> element. This allows the image to resize smoothly within its container.
The .img-fluid class applies max-width: 100%; and height: auto; to the image