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

image

Circled images will look like following

image

You can create round corner images as following,

image

Rounded image will look like following

image

You can create Polaroid image as following,

image

Polaroid image will look like following ,

image

You can create different types of images as 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 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

image

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.

image

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

image

Above buttons can be created as 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 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 navigation bar created as following,

image

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.

Learning Bootstrap Part 2: Working with Buttons

Read Part 1 here: Getting started with Bootstrap

Buttons and anchor tags are very important controls. Bootstrap allows you to customize look of these two very elegantly.

Block level Button: if you want to create a button as the full width of parent container that can be easily created as following


<div class="container">
 <button class="btn btn-large btn-block" type="button">Login</button>
 <button class="btn btn-large btn-block" type="button">Register</button>
 <button class="btn btn-large btn-block" type="button">Twitter</button>
 <button class="btn btn-large btn-block" type="button">Facebook</button>
 </div>

In above we are putting buttons inside fixed container and you will see buttons would rendered as following. Buttons are taking width of parent div container.

clip_image002

There are different styles of buttons available. You can very easily create them. Let us say you want to create a Success Button. Success button can be created by setting class as btn-success

image

If you want to create Info button then that can be created setting button class as btn-info

clip_image001

Different kinds of buttons available in bootstrap is as following,

image

You can create above buttons as easily as given below


<!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">

 <button class="btn btn-large btn-primary" type="button">Primary Button</button><br />
 <button class="btn btn-info"
 type="button">
 Info Button
 </button>

<br />

 <button class="btn btn-success"
 type="button">
 Success Button
 </button>

 <br />
 <button class="btn btn-large btn-warning" type="button">Warning Button</button> <br />
 <button class="btn btn-large btn-danger" type="button">Danger Button</button><br />
 <button class="btn btn-large btn-inverse" type="button">Inverse Button</button> <br />
 <button class="btn btn-large btn-link" type="button">Link</button> <br />
 </div>

</body>
</html>

Bootstrap also provides you different sizes of buttons. If you want to create a large button that can be created as following

clip_image001[6]

You can create a large success button as following

clip_image003

There are three buttons sizes available,

  1. Large button : btn-large
  2. Default button : btn
  3. Small button : btn-small
  4. Mini button : btn-mini

image

Above buttons can be crated with following mark-up


<!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">
 <button class="btn btn-large ">
 Large Button
 </button> <br />
 <button class="btn">
 Default Button
 </button> <br />
 <button class="btn btn-small">
 Small Button
 </button> <br />
 <button class="btn btn-mini">
 Mini Button
 </button> <br />

 </div>

</body>
</html>

In this way you can work with buttons and make them immersive using twitter bootstrap. In further posts we will get into more deep into bootstrap. I hope you find this post useful. Thanks for reading.