Tutorials Bootstrap Rendering Responsive Images Using Bootstrap

Rendering Responsive Images Using Bootstrap

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

Total
0
Shares
guest
0 Comments
Inline Feedbacks
View all comments
Previous Post

Configure POJOs with Java Collection Attributes in Spring

Next Post
Bootstrap3 Tutorials and Examples

Bootstrap Grid System Example

Related Posts
By clicking “Allow All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookie Notice
Allow All
0
Would love your thoughts, please comment.x
()
x