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 are very essential of web application development and Boot strap also realize this. If you want to create rounded image, circled images or Polaroid image then that is as easy as adding a class.

You can create a circled image as following


Circled images will look like following


You can create round corner images as following,


Rounded image will look like following


You can create Polaroid image as following,


Polaroid image will look like following ,


You can create different types of images as following

<!DOCTYPE html>
 <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" />
 <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" />


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 follow following steps to work with icons

  1. Create a <i> tag
  2. Set class of <i> tag with icon name. For erxample if you want to create calendar icon then that can be created as following


You can add icons to buttons as following . A Search button can be created as following . We are nesting <i> tag inside button taf to create a button with icons.


You can create different size of button with icons as following ,


Above buttons can be created as following

<div class="container">
 <a class="btn btn-large">
 <i class="icon-search"></i>Search
 <br />
 <a class="btn btn-small">
 <i class="icon-search"></i>Search
 <br />
 <a class="btn btn-mini">
 <i class="icon-search"></i>Search

You can create navigation lists with icons as 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>

And you will find navigation bar created as following,


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 post useful. Thanks for reading.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s