Bootstrap 5 Images

Image Shapes

Rounded Corners:

Circle:

Thumbnail:

The .rounded class adds rounded corners to an image:

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

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

Float an image to the left with the .float-start class 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 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:

W3.CSS is an excellent alternative to Bootstrap 5.

W3.CSS is smaller, faster, and easier to use.

If you want to learn W3.CSS, go to our W3.CSS Tutorial.