Bootstrap is the CSS technology developed by Twitter. It comes with predefined styles that are used straightly to make our webpage nice look and feel.
Introduction
Please read
Bootstrap Introduction if you are new to Bootstrap.
Placing Images in ordered manner, Grouping them with some descriptions and elements will make them looking good in our webpage. Now lets discuss them in this chapter.
Objective
The main objective of this article is to learn working with different types of Images with Bootstrap that makes very good sense to them.
Using Bootstrap code
It is necessary to decorate the images to make them look nice in the web applications. Twitter Bootstrap helps in making such type of decorations easily.
Creating stylish Images
There are some predefined img
classes in bootstrap.css
such as img-circle
(Sets circle frame to the Image), img-rounded
(for curved borders) and img-thumbnail
(for thumbnail images).
<div>
<img src="/DotNetFunda.jpg" class="img-circle" alt="Circular" />
<img src="/DotNetFunda.jpg" class="img-rounded" alt="Rounded" />
<img src="/DotNetFunda.jpg" class="img-thumbnail" alt="Thumbnail" />
</div>
The output of the above example code snippet is,

Creating Image Thumbnails
Using img-thumbnail class, we can create image thumbnails in a tabular manner. Take a look on the below example code in which we have 8 images.
<div class="container">
<div class="row">
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="/DotNetFunda.jpg" alt="DotNetFunda">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="/DotNetFunda.jpg" alt="DotNetFunda">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="/DotNetFunda.jpg" alt="DotNetFunda">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="/DotNetFunda.jpg" alt="DotNetFunda">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="/DotNetFunda.jpg" alt="DotNetFunda">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="/DotNetFunda.jpg" alt="DotNetFunda">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="/DotNetFunda.jpg" alt="DotNetFunda">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="/DotNetFunda.jpg" alt="DotNetFunda">
</a>
</div>
</div>
</div>
Run the above code in your browser and you will see the following arrange of thumbnails as below,

Creating Images with Description
Creating Images with some description is very helpful in some cases. Observe the below example containing media
classes of Bootstrap.
<div class="container">
<div class="col-xs-6">
<div class="media">
<a href="#" class="pull-left">
<img src="/DotNetFunda.jpg" class="media-object" width="100" height="80" alt="Sample Image">
</a>
<div class="media-body">
<h4 class="media-heading">DotNetFunda <small><i>Fundamentals of .Net</i></small></h4>
<p>DotNetFunda is the website for those who are looking for .Net Tips and Tricks.</p>
</div>
</div>
<div class="media">
<a href="#" class="pull-left">
<img src="/ITFunda.jpg" class="media-object" width="100" height="80" alt="Sample Image">
</a>
<div class="media-body">
<h4 class="media-heading">IT Funda <small><i>IT Training & Placement</i></small></h4>
<p>IT Funda is the corporative website for those who need IT Training and for those who are looking to buy IT Stuff.</p>
</div>
</div>
<div class="media">
<a href="#" class="pull-left">
<img src="/KidsFunda.jpg" class="media-object" width="100" height="80" alt="Sample Image">
</a>
<div class="media-body">
<h4 class="media-heading">KidsFunda <small><i>Learn with Fun for Kids</i></small></h4>
<p>Kids Funda is designed for Kids to make them learn easily with some fun.</p>
</div>
</div>
</div>
</div>
Run and see the above code in your browser and you will get nice image lists like below,

How nice it is looking Isn't it !!
Creating Images with some options
Now lets see images with some buttons and description as well. Observe the below example
<div class="container">
<div class="row">
<div class="col-xs-2">
<div class="thumbnail">
<img src="/DotNetFunda.jpg" alt="DotNetFunda">
<div class="caption">
<h4>DotNetFunda</h4>
<p>Description.....</p>
<p><a href="#" class="btn btn-primary">Download</a> <a href="#" class="btn btn-warning"><span class="glyphicon glyphicon-share"></span> </a></p>
</div>
</div>
</div>
<div class="col-xs-2">
<div class="thumbnail">
<img src="/ITFunda.jpg" alt="ITFunda">
<div class="caption">
<h4>ITFunda</h4>
<p>Description.....</p>
<p><a href="#" class="btn btn-primary">Download</a> <a href="#" class="btn btn-warning"><span class="glyphicon glyphicon-share"></span> </a></p>
</div>
</div>
</div>
<div class="col-xs-2">
<div class="thumbnail">
<img src="/KidsFunda.jpg" alt="KidsFunda">
<div class="caption">
<h4>KidsFunda</h4>
<p>Description.....</p>
<p><a href="#" class="btn btn-primary">Download</a> <a href="#" class="btn btn-warning"><span class="glyphicon glyphicon-share"></span> </a></p>
</div>
</div>
</div>
</div>
</div>
Output of the above code will gives Images with some options to operate,

Creating Nested Images with Description
Similar to above Descriptive Images, we can create Nested Descriptive Images by writing Nested code like below,
<ul class="media-list">
<li class="media">
<a href="#" class="pull-left">
<img src="/DotNetFunda.jpg" width="100" height="80" class="media-object" alt="Sample Image">
</a>
<div class="media-body">
<h4 class="media-heading">DotNetFunda</h4>
<p>DotNetFunda is the website for those who are looking for .Net Tips and Tricks.</p>
<!-- Nested media object -->
<div class="media">
<a href="#" class="pull-left">
<img src="/ITFunda.jpg" width="100" height="80" class="media-object" alt="Sample Image">
</a>
<div class="media-body">
<h4 class="media-heading">IT Funda(Nested)</h4>
<p>IT Funda is the corporative website for those who need IT Training and for those who are looking to buy IT Stuff.</p>
<!-- Chain-Nested media object -->
<div class="media">
<a href="#" class="pull-left">
<img src="/KidsFunda.jpg" width="100" height="80" class="media-object" alt="Sample Image">
</a>
<div class="media-body">
<h4 class="media-heading">Kids Funda(Nested)</h4>
<p>Kids Funda is designed for Kids to make them learn easily with some fun.</p>
</div>
</div>
</div>
</div>
<!-- Nested media object -->
<div class="media">
<a href="#" class="pull-left">
<img src="/ITFunda.jpg" width="100" height="80" class="media-object" alt="Sample Image">
</a>
<div class="media-body">
<h4 class="media-heading">IT Funda(Nested)</h4>
<p>IT Funda is the corporative website for those who need IT Training and for those who are looking to buy IT Stuff.</p>
<!-- Chain-Nested media object -->
<div class="media">
<a href="#" class="pull-left">
<img src="/KidsFunda.jpg" width="100" height="80" class="media-object" alt="Sample Image">
</a>
<div class="media-body">
<h4 class="media-heading">Kids Funda(Nested)</h4>
<p>Kids Funda is designed for Kids to make them learn easily with some fun.</p>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="media">
<a href="#" class="pull-left">
<img src="/DotNetFunda.jpg" width="100" height="80" class="media-object" alt="Sample Image">
</a>
<div class="media-body">
<h4 class="media-heading">DotNetFunda</h4>
<p>DotNetFunda is the website for those who are looking for .Net Tips and Tricks.</p>
</div>
</li>
</ul>
the output of the above code gives Nested elements with description like below,

Conclusion
In this article we have seen working with different types of Images using Twitter Bootstrap(
Get Here). Hope you understand. If you have any clusters or confusions in this topic, please ask below, I'll be waiting for your Questions.
Thanks for reading,