Bootstrap Images

Introduction

Bootstrap offers various image styles to enhance the appearance and responsiveness of images.

1. Bootstrap Image Shapes

Bootstrap provides predefined classes to modify image shapes.

1.1 Rounded Corners

Use the rounded class to give images rounded corners.

<img src="image.jpg" class="rounded" alt="Rounded Image">

Note: Rounded images provide a softer look compared to sharp-edged images.

1.2 Circle Image

Use the rounded-circle class to create a circular image.

<img src="image.jpg" class="rounded-circle" alt="Circle Image">

Note: Circular images are commonly used for profile pictures and icons.

1.3 Thumbnail Image

Use the img-thumbnail class to add a border and padding around the image.

<img src="image.jpg" class="img-thumbnail" alt="Thumbnail Image">

Note: Thumbnails are useful for creating image previews and galleries.

2. Responsive Images

To make images responsive, add the img-fluid class. This ensures the image adjusts to the screen size. The .img-responsive class applies display: block; and max-width: 100%; and height: auto; to the image.

<img src="image.jpg" class="img-fluid" alt="Responsive Image">

Note: Responsive images maintain their aspect ratio while adapting to different screen sizes.

Request more information

Bootstrap Images