Read Part 1 here: Getting started with Bootstrap
Read Part 2 here: Working with Buttons
Working with images is very essential for web application development and Bootstrap also realizes this. If you want to create a rounded image, circled images or a Polaroid image then that is as easy as adding a class.
You can create a circled image as in the following:
![Bootstrap1.jpg]()
Circled images will look like the following:
![Bootstrap2.jpg]()
You can create rounded corner images as in the following:
![Bootstrap3.jpg]()
The rounded image will look like the following:
![Bootstrap4.jpg]()
You can create a Polaroid image as in the following:
![Bootstrap5.jpg]()
The Polaroid image will look like the following:
![Bootstrap6.jpg]()
You can create various types of images as in the following:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<link href="Content/Site.css" rel="stylesheet" />
<!-- Bootstrap references -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<img src="Images/uk.jpg" class="img-polaroid"/>
<img src="Images/indiaflag.jpg" class="img-circle"/>
<img src="Images/deepika-paduk.jpg" class="img-polaroid" /> |
</div>
</body>
</html>
It is very easy to work with Icons also in Bootstrap. Bootstrap supports free icons from http://glyphicons.com/ for developers. There are 140 icons avialble. You need to use the following procedure to work with icons.
- Create am <i> tag
- Set the class of the <i> tag with an icon name. For erxample if you want to create a calendar icon then that can be created as in the following:
![Bootstrap7.jpg]()
You can add icons to buttons as in the following. A "Search" button can be created as in the following. We are nesting an <i> tag inside a button to create a button with icons.
![Bootstrap8.jpg]()
You can create a different size of button with icons as in the following:
![Bootstrap9.jpg]()
The buttons above can be created as in the following:
<div class="container">
<a class="btn btn-large">
<i class="icon-search"></i>Search
</a>
<br />
<a class="btn btn-small">
<i class="icon-search"></i>Search
</a>
<br />
<a class="btn btn-mini">
<i class="icon-search"></i>Search
</a>
</div>
You can create navigation lists with icons as in the following:
<ul class="nav nav-list">
<li class="active"><a href="#home"><i class="icon-home icon-white"></i>Home</a></li>
<li><a href="#"><i class="icon-gift"></i>Gift</a></li>
<li><a href="#"><i class="icon-picture"></i>Images</a></li>
<li><a href="#"><i class="i"></i>Misc</a></li>
</ul>
And you will find a navigation bar created as in the following:
![Bootstrap10.jpg]()
In this way you can add icons to any other elements. Bootstrap makes working with icons and images very easy. I hope you find this article useful. Thanks for reading.