Learning Bootstrap Part 3: Working With Image and Icons

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.

  1. Create am <i> tag
  2. 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.

Next Recommended Readings