Make an image responsive with Bootstrap

BootstrapWeb DevelopmentCSS Framework

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 −

Example

 Live Demo

<!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://www.tutorialspoint.com/python/images/python_data_science.jpg" class = "img-responsive" alt = "Online Training">
   </body>
</html>
raja
Published on 14-Jun-2018 10:57:07
Advertisements