Rendering Images in Bootstrap

Introduction

Bootstrap offers classes to make images responsive and styled effectively across different screen sizes. Using these classes, you can control how images scale and fit within the layout, ensuring they look consistent across devices.

In this section, we’ll cover Bootstrap’s responsive image class, rounded corners, circular images, and image alignment within a page.

Responsive Images

To make images responsive in Bootstrap, use the .img-fluid class. This class ensures that the image scales appropriately within its container, adjusting its width based on the screen size.

Example: Responsive Image

    <div class="container">
        <img src="sample.jpg" class="img-fluid" alt="Sample Image">
    </div>

Explanation

  • .img-fluid: Makes the image responsive, setting its max-width to 100% and height to auto.
  • The image will automatically scale to fit within its container without losing its aspect ratio.

Image Shapes

Bootstrap includes classes for styling image shapes. Here are some options:

  • .rounded: Adds small, rounded corners.
  • .rounded-circle: Makes the image circular.
  • .img-thumbnail: Adds a border around the image, giving it a thumbnail style.

Example: Image Shapes

    <div class="container">
        <img src="rounded.jpg" class="rounded img-fluid" alt="Rounded Image">
        <img src="circle.jpg" class="rounded-circle img-fluid" alt="Circular Image">
        <img src="thumbnail.jpg" class="img-thumbnail img-fluid" alt="Thumbnail Image">
    </div>

Explanation

  • .rounded: Adds rounded corners to the image.
  • .rounded-circle: Crops the image to a circular shape.
  • .img-thumbnail: Styles the image as a thumbnail with a border.
  • All images also have .img-fluid for responsiveness.

Image Alignment

To align images within the content, Bootstrap provides helper classes for float-based alignment.

Example: Image Alignment

    <div class="container">
        <img src="float-left.jpg" class="float-start img-fluid" alt="Left-aligned Image">
        <img src="float-right.jpg" class="float-end img-fluid" alt="Right-aligned Image">
    </div>

Explanation

  • .float-start: Aligns the image to the left of its container.
  • .float-end: Aligns the image to the right of its container.
  • Each image has .img-fluid to keep it responsive.

Expected Output

When using Bootstrap’s image classes, the images will scale to fit their containers and apply specified styles. Rounded and circular images will appear with the specified shape, and aligned images will float left or right as expected.

Expected Output Preview