Rendering Responsive Images Using Bootstrap

LinkedIn
Hacker News

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

Tagged in HTMLResponsive

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.

Related Articles

Join The Discussion

Please note: We reserve the right to delete comments that contains snarky remarks, offensive or off-topic. To know more read our comments policy.