Responsive Images In Bootstrap with Examples

Posted By Bajarangi soft , Posted On 08-10-2020

Bootstrap offers different classes for images to make their appearance better and also to make them responsive. Making an image responsive means that it should scale according to its parent element. That is, the size of the image should not overflow it’s parent and will grow and shrink according to the change in the size of its parent without losing its aspect ratio.

The different classes available in Bootstrap for images are as explained below:

.img-responsive class: Responsive images in Bootstrap are created by adding .img-responsive class to img tag. An img-responsive class applies: max-width: 100% | height:auto | display:block onto the image.

.img-responsive class Example-1

<!DOCTYPE html>
<html>
<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Link Bootstrap JS and JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
    <h1>Responsive Image </h1>
    <br>
    <h3>.img-responsive class</h3>

    <p>
        Change the size of the browser window
        to see effect
    </p>

    <img src="b1.jpg"
         class="img-responsive" alt="Responsive image"
         width="307" height="240" />
</div>
</body>
</html>

.img-fluid class: Add .img-fluid class to tag. The .img-fluid class applies : max-width: 100% | height: auto onto the image.
.img-fluid class Example-2

<!DOCTYPE html>
<html>

<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- Link Bootstrap JS and JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
    <h3>.img-fluid class</h3>

    <p>
        Change the size of the browser window
        to see effect.
    </p>

    <img src="b1.jpg"
         class="img-fluid" alt="Responsive Image"
         width="307" height="240" />
</div>

</body>

</html>

.img-rounded class: The rounded corners to an image arw added by .img-rounded class. (Rounded corners are not supported by IE8.)
.img-rounded class Example-3

!DOCTYPE html>
<html>

<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- Link Bootstrap JS and JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">

    <h3>.img-rounded class</h3>

    <p>Rounded Corners</p>

    <img src="b1.jpg"
         class="img-rounded" alt="Responsive Image"
         width="307" height="240" />
</div>

</body>

</html>

.img-circle class: The shape of image is made circle by .img-circle class.(Rounded corners are not supported by IE8.)
.img-circle class Example-4

<!DOCTYPE html>
<html>

<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- Link Bootstrap JS and JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">

    <h3>.img-circle class </h3>

    <p>Circle</p>

    <img src="b1.jpg"
         class="img-circle" alt="Responsive Image"
         width="307" height="240" />
</div>
</body>

</html>

.img-thumbnail class: Shaping of image to a thumbnail is done by the .img-thumbnail class.
.img-thumbnail class Example-5

<!DOCTYPE html>
<html>

<head>
    <!-- Link Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- Link Bootstrap JS and JQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container">
    <h3>.img-thumbnail class</h3>

    <p>Thumbnail</p>

    <img src="b1.jpg"
         class="img-thumbnail" alt="Responsive Image"
         width="307" height="240">
</body>

</html>

Related Post

How To Create Login Form Using Html , Bootstrap And Css
What Is Bootstrap How Does It Works
How To Use Bootstrap Container Class
How Can I Customize The Bootstrap Grid
What IS Mean By Bootstrap Typography ?
How To Add Background Image In Bootstrap 4
How To Create A Bootstrap Alert To Show Up
How Can I Add Progress Bar In Bootstrap Carousel
Which Class Creates a List of Groups In Bootstrap 4
Responsive Images In Bootstrap with Examples
How To Set Responsive Font Size For P Element Using CSS