Bootstrap 4 Images

Welcome to The Coding College! In this guide, we’ll explore how to work with Bootstrap 4 Images. Images are an integral part of modern web design, and Bootstrap 4 provides a set of utilities to handle responsive images, rounded corners, thumbnails, alignment, and more without writing custom CSS.

By the end of this article, you’ll know how to use Bootstrap 4’s image classes to create visually appealing and responsive designs for your website.

Why Use Bootstrap 4 for Images?

Bootstrap 4 simplifies image styling with its built-in classes. Whether you need responsive images, shapes, or alignment, these utilities save you time and effort. With the growing demand for mobile-first design, Bootstrap ensures your images look great on any screen size.

Responsive Images

To make images responsive, add the .img-fluid class to your <img> tag. This class applies max-width: 100%; and height: auto;, ensuring the image scales proportionally within its container.

Example:

<img src="https://via.placeholder.com/600x400" class="img-fluid" alt="Responsive Image">

This image will resize automatically to fit the width of its parent container.

Image Shapes

Bootstrap 4 provides classes to create different shapes for your images:

Rounded Images

Use the .rounded class to add rounded corners to your image.

Example:

<img src="https://via.placeholder.com/150" class="rounded" alt="Rounded Image">

Circle Images

Use the .rounded-circle class to create circular images. This works best with square images to maintain the circular shape.

Example:

<img src="https://via.placeholder.com/300x200" class="img-thumbnail" alt="Thumbnail Image">

Thumbnail Images

The .img-thumbnail class adds a border, padding, and rounded corners to an image, making it look like a thumbnail.

Example:

<img src="https://via.placeholder.com/400x300" class="img-fluid mx-auto d-block" alt="Centered Image">

Aligning Images

Bootstrap 4 makes it easy to align images using text alignment classes.

Center Aligned Image

Use the .mx-auto class in combination with .d-block to center-align an image.

Example:

<img src="https://via.placeholder.com/400x300" class="img-fluid mx-auto d-block" alt="Centered Image">

Left and Right Alignment

Use the .float-left or .float-right classes to align images to the left or right.

Example:

<img src="https://via.placeholder.com/200" class="float-left mr-3" alt="Left Aligned">  
<p>This is an example of a left-aligned image with text wrapping around it.</p>  

<img src="https://via.placeholder.com/200" class="float-right ml-3" alt="Right Aligned">  
<p>This is an example of a right-aligned image with text wrapping around it.</p>

Tip: Use spacing utilities like .mr-3 and .ml-3 to add margins around your floated images.

Image Sizes

Use Bootstrap’s width and height utilities to control the size of images.

Example:

<img src="https://via.placeholder.com/300x200" class="w-50" alt="50% Width">  
<img src="https://via.placeholder.com/300x200" class="h-50" alt="50% Height">
  • .w-50: Sets the width to 50% of the parent container.
  • .h-50: Sets the height to 50% of the parent container.

Responsive Image Grid

Bootstrap 4’s grid system can be combined with image classes to create responsive image galleries.

Example:

<div class="container">  
  <div class="row">  
    <div class="col-md-4">  
      <img src="https://via.placeholder.com/300x200" class="img-fluid mb-3" alt="Image 1">  
    </div>  
    <div class="col-md-4">  
      <img src="https://via.placeholder.com/300x200" class="img-fluid mb-3" alt="Image 2">  
    </div>  
    <div class="col-md-4">  
      <img src="https://via.placeholder.com/300x200" class="img-fluid mb-3" alt="Image 3">  
    </div>  
  </div>  
</div>

This creates a three-column layout for medium and larger screens. On smaller screens, the images will stack vertically.

Adding Overlays to Images

Use Bootstrap’s utility classes to add text overlays to images.

Example:

<div class="position-relative">  
  <img src="https://via.placeholder.com/600x400" class="img-fluid" alt="Image with Overlay">  
  <div class="position-absolute top-50 start-50 translate-middle text-white">  
    <h3>Overlay Text</h3>  
  </div>  
</div>

In this example, we’ve used the .position-relative and .position-absolute classes to create a text overlay.

Practical Example: Bootstrap 4 Image Gallery

Here’s a complete example of a responsive image gallery with rounded thumbnails and hover effects:

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Bootstrap 4 Images</title>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  
</head>  
<body>  
  <div class="container my-5">  
    <h1 class="text-center text-primary">Bootstrap 4 Image Gallery</h1>  
    <div class="row">  
      <div class="col-md-4">  
        <img src="https://via.placeholder.com/300x200" class="img-thumbnail" alt="Image 1">  
      </div>  
      <div class="col-md-4">  
        <img src="https://via.placeholder.com/300x200" class="img-thumbnail" alt="Image 2">  
      </div>  
      <div class="col-md-4">  
        <img src="https://via.placeholder.com/300x200" class="img-thumbnail" alt="Image 3">  
      </div>  
    </div>  
  </div>  
</body>  
</html>

Best Practices for Using Bootstrap 4 Images

  1. Optimize Images: Use optimized images to improve page loading speed.
  2. Test Responsiveness: Check how your images display on various screen sizes.
  3. Combine Classes: Combine .img-fluid, .rounded, or .img-thumbnail for better design.
  4. Accessibility: Always include the alt attribute for images to improve accessibility.

Learn More with The Coding College

Bootstrap 4 Images make it easy to create responsive, stylish designs for your web projects. At The Coding College, we’re dedicated to helping you master web development.

Explore more tutorials and tips to enhance your coding skills. Don’t forget to leave your comments or questions—we’re here to help!

Leave a Comment