Make an image responsive with Bootstrap

To make an image responsive in Bootstrap, add a class .img-responsive to the <img> tag. This class applies max-width: 100%; and height: auto; to the image so that it scales nicely to the parent element.

The following is how you can simply make an image responsive:

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <img src = "https://cdn.pixabay.com/photo/2018/09/30/13/18/lantern-3713493_960_720.jpg" class = "img-responsive" alt = "Online Training">
   </body>
</html>

EXAMPLE :
<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *