Bootstrap Responsive Image

In this tutorial, you will learn to create a responsive image using Bootstrap.

For a responsive website, it is very necessary to create a responsive image that fits the devices according to their size.

Most of the time size of the image get exceeded by the screen width of the device. Manually you can adjust it to fit a certain device but it will break when opened on another device.

There are 2 different classes in bootstrap to make images responsive:

img-fluid
img-thumbnail

Making Images Responsive using .img-fluid

To make an image responsive so that it can fit on all devices use the .img-fluid class of Bootstrap to the image.

The .img-fluid class use max-width: 100% and height: auto which does not let the image flow out of the maximum width of the screen and the maximum width is set to 100% which makes it responsive.

Here is an example of a responsive image using bootstrap.

<!Doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <title>Responsive image</title>
</head>

<body>
  <h2>Responsive image using img-fluid class.</h2>
  <img src="lonely-tree.jpg" class="img-fluid" alt="responsive image">
</body>

</html>

Try it

Output:

Responsive image using img-fluid class.

Responsive Image Using img-thumbnail

Another bootstrap class that make images responsive is .img-thumbnail.

It additionally adds a border and border radius of 0.25rem with padding of 0.25rem and creating a look like a thumbnail.

<!Doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <title>Responsive image</title>
</head>

<body>
  <h2>Responsive image using img-thumbnail class.</h2>
  <img src="lonely-tree.jpg" class="img-thumbnail" alt="responsive image">
</body>

</html>

Try it

Output:

Responsive image using img-thumbnail class.

Bootstrap Image Responsive Center

Images become responsive by using .img-fluid or .img-thumbnail but they align to the left side of the webpage as usual.

To center the image you need to add some extra CSS to the image.

Create a class name center (you can name whatever you want). Now make the image a block level element by using display property, i.e. display: block and now align it to center by giving margin-left and margin-right to auto, i.e. margin: 0 auto.

<!Doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Responsive image center</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <style>
    .center {
      display: block;
      margin: 0 auto;
    }
  </style>
</head>

<body>
  <h2>Responsive image using img-fluid class and aligning it to center.</h2>
  <img src="assets/bootstrap/lonely-tree.jpg" class="img-fluid center">
</body>

</html>

Try it

Output:

Conclusion

Bootstrap has a lot of great features and you can use them to create a responsive website. But you can also use them to create a responsive image.

you can use .img-fluid or .img-thumbnail to make images responsive. you can also use .center to center the image.

Points to remember:

The .img-fluid class make an image responsive in Bootstrap.
The .img-thumbnail class adds extra style like border and border radius and make an image responsive too.