How to make an image responsive in bootstrap?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

In this article, we will use some bootstrap classes to design responsive image.

To make image responsive, put .img-fluid class to create image responsive in bootstrap.

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:

Table of contents

  • Includes bootstrap view
  • Includes bootstrap library
  • Define its class name

Step 1: Includes bootstrap view

To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>.

    <meta name="viewport" content="width=device-width, initial-scale=1">

Step 2: Includes bootstrap library

First of all, load the Bootstrap framework CSS into the head tag of your webpage.

<!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Step 3: Define its class name

After that, create image responsive with a class name .img-fluid.

    <div class="container mt-3">
        <h2>Responsive image</h2>
        <img src="image/water.jpg" class="img-fluid" alt="Responsive image">
    </div>

Example.

Let’s look at the following example to understand how it basically works:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-3">
        <h2>Responsive image</h2>
        <img src="image/water.jpg" class="img-fluid" alt="Responsive image">
    </div>
</body>
</html>

Check the output of the above code example.

When window size is > 576px :

Bootstrap, Table, Responsive

When window size is less than < 576px :

Bootstrap, Table, Responsive

All the best 👍

Follow me on Twitter