Working with Images in Bootstrap

Goud.Kv
Posted by in Bootstrap category on for Beginner level | Points: 250 | Views : 13961 red flag
Rating: 5 out of 5  
 1 vote(s)

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.
Recommendation
Read Working with Forms in Bootstrap part-2 before this article.

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>&nbsp;</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>&nbsp;</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>&nbsp;</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,



Recommendation
Read How to create Tabs and Pills in Bootstrap Part-1 after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Goud.Kv
Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)