StackTips
 3 minutes

Rendering Responsive Images Using Bootstrap

By Bibhudatta @bibhu_bib, On Sep 17, 2023 Bootstrap 2.62K Views

The .img-responsive bootstrap class provides the ability to control the image rendering as per the available space and screen size. Ideally except images, most of the other HTML elements respond to the target device automatically when you include the Bootstrap CSS in your pages. However in case of images, you need to add this class manually.

Following are the <img> classes which can be used to style any image.

  • .img-rounded: Adds round corners to an image
  • .img-circle: Shapes the images to a circle
  • .img-thumbnail: Shapes the images to a thumbnail
  • .img-responsive: makes an image responsive. The image will scale nicely to the parent element.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap responsive image example - JavaTechig</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head> 
     <body>
       <div class="container">
         <div class="page-header"><h1>Hello Bootstrap!!</h1></div>
         <div class="row">

          <!-- Start content panel -->
           <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
           
           <ul class="list-inline">
              <li><img src="images/son.jpg" class="img-responsive" ></li>
              <li><img src="images/son.jpg" class="img-responsive" ></li>
          </ul>

		  <ul class = "list-inline">
          <li><img src="images/temple.jpg" class="img-rounded img-responsive"></li>
          <li><img src="images/son.jpg" class="img-circle img-responsive"></li>
          <li><img src="images/rock.jpg" class="img-thumbnail img-responsive"></li>
		  </ul>
         </div> <!-- End row --> 
       </div> <!-- End container -->

      <!-- Start footer -->
       <div id="footer">
         <div class="container">
           <div class="text-muted pull-left"><a href="http://stacktips.com" target="_blank">stacktips.com</a></div>
           <div class="text-muted pull-right"><a href="http://twitter.com/npanigrahy" target="_blank">Follow me on twitter</a></div>
         </div>
       </div>
       <!-- End footer -->
     </body>
</html>

Output
Rendering Responsive Images Using Bootstrap

bibhu_bib avtar

Bibhudatta

She loves coding for web and working with Microsoft Technologies. She has developed enterprise applications with B2B and B2C business models for worlds leading Financial and Retail chain market.