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>
      <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>
      <img src = "" class = "img-responsive" alt = "Online Training">

<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 *