Images in Bootstrap 5

Bootstrap Images

Bootstrap provides several classes to style images in different ways.

Here are the image classes in Bootstrap:

img-fluid: This class makes the image responsive by setting its maximum width to 100% and height to auto. This means that the image will scale down or up to fit the container.
rounded: This class adds rounded corners to the image.
rounded-circle: This class makes the image a perfect circle by adding rounded corners with a radius equal to half of the image width.
rounded-0: This class removes the rounded corners from the image.
img-thumbnail: This class adds a border and some padding to the image to make it look like a thumbnail.

As an example:

In this example:

This will display the image with rounded corners and make it responsive using the img-fluid class.

To align images in Bootstrap, you can use the built-in classes provided by Bootstrap.

Bootstrap offers several classes that can be used to align images, such as "text-center", "mx-auto", "float-left", "float-right", etc.

Here are some examples of how you can align images in Bootstrap:

To center an image, you can use the "mx-auto" class.

As an example:

<img src="your-image.jpg" class="mx-auto" />

To float an image to the left or right, you can use the "float-left" or "float-right" class.

As an example:

<img src="your-image.jpg" class="float-left" />

<img src="your-image.jpg" class="float-right" />

To align an image to text, you can use the "align-top", "align-middle", or "align-bottom" classes.

As an example:

<img src="your-image.jpg" class="align-top" />

<img src="your-image.jpg" class="align-middle" />

<img src="your-image.jpg" class="align-bottom" />

To make your images responsive, you can use the "img-fluid" class. This will ensure that your images are scaled properly on different screen sizes.

As an example:

tip

Keep in mind that these classes should be applied to the "img" tag and not to the "div" or "container" holding the image.