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 −

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>

Updated on: 12-Jun-2020

6K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements