Learning Bootstrap Part 1: Getting started with Bootstrap

What is Twitter Bootstrap ? Well, I will answer this question in further posts. In this post I am focusing on getting started with Bootstrap and I will show you how easy it could be to make your web applications more immersive using bootstrap.

Let us start with downloading and installing Bootstrap. You can download that from here

clip_image002

After downloading unzip the folder and you will find following subfolders inside that. Folders name are very much self-explanative. CSS files are in CSS folder and JS files are in JS folder.

image

Next you need to add bootstrap files in project structure. In Visual Studio folder structure should look like as following

image

Now a typical HTML file looks like following,


<!DOCTYPE html>
<html>
<head>
 <title></title>
 <script src="Scripts/jquery-1.7.1.min.js"></script>
 <link href="Content/Site.css" rel="stylesheet" />
</head>
<body>

 <h1>Bootstarp Sample</h1>
 <div>I am here to decide about my Ideas ! Okay ?</div>

</body>
</html>

HTML will render without bootstrap as following,

image

You can add bootstrap CSS and JS references in the same way we add usual CSS and JS reference.

image

After adding references of bootstrap CSS and JS HTML should look like 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>

 <h1>Bootstarp Sample</h1>
 <div>I am here to decide about my Ideas ! Okay ?</div>

</body>
</html>

&nbsp;

Now we have added bootstrap CSS and HTML will render as following. You can notice the difference typography and the way H1 and DIV elements are rendering now.

image

Now let us see that how easy it is to differentiate different kind of message in bootstrap. For example if we want to show an error message that can be done by setting class of a paragraph.

image

In the same way an info message can be displayed as following,

image

We can show different kind of messages in application as easily as depicted in following HTML


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

 <h1>Bootstarp Sample</h1>
 <p class="muted">This is muted text</p>
 <p class="text-warning">This is warning text</p>
 <p class="text-error">This is Error !</p>
 <p class="text-info">This is Info !</p>
 <p class="text-success">This is sucess message !</p>
</body>
</html>

And different kind of message will render as following,

image

Let us take another example of table. You can create a table a with some rows as following,

<table>
 <tr>
 <td>Dhananjay Kumar</td>
 <td>@debug_mode</td>
 </tr>
 <tr>
 <td>John Bristowe</td>
 <td>@johnbristowe</td>
 </tr>
 <tr>
 <td>Chris Eargle</td>
 <td>@kodefuguru</td>
 </tr>
 <tr>
 <td>Pinal Dave</td>
 <td>@pinaldave</td>
 </tr>
 </table>

&nbsp;

On rendering above HTML in browser you will get table as following. Certainly this table is not looking very immersive.

clip_image001

Using bootstrap we can style table as easily as setting class value. If you set class of table as table then table will stretch to all width available.

clip_image002

And you will notice the way table is rendering.

clip_image004

If you want strip table that can be done by just setting class value. A stripped table can be created in bootstrap as following,

clip_image005

As output table will render as given in below image,

clip_image007

Full source code of above stripped table is 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>

 <h1>Bootstarp Sample</h1>
 <table class="table table-striped">
 <tr>
 <td>Dhananjay Kumar</td>
 <td>@debug_mode</td>
 </tr>
 <tr>
 <td>John Bristowe</td>
 <td>@johnbristowe</td>
 </tr>
 <tr>
 <td>Chris Eargle</td>
 <td>@kodefuguru</td>
 </tr>
 <tr>
 <td>Pinal Dave</td>
 <td>@pinaldave</td>
 </tr>
 </table>
</body>
</html>

In this post we focused on getting started with bootstrap. In further posts we will get into details of other aspects of bootstrap. I hope you find this post useful. Thanks for reading.

Flip Image on hover using CSS 3.0

In this post we will take a look on flipping images using CSS3.0. Let us assume that we have a div with two images as following,


<div id="flipimagediv">
 <img id="backImage" src="images/srt.jpg" />
 <img id="frontImage" src="images/msdhoni.jpg" />
 </div>

Now we want to flip these two images on mouse hover. We will achieve that using CSS3.0. To start with let us set container div style. In container we are setting width, height and display.


#flipimagediv {
display: inline-block;
width: auto;
height: auto;
position: relative;
}

After setting container div styles let us go ahead and set image styles. In image style we are setting usual properties like height and width. We are setting

  • transition-property
  • transition-duration
  • transition-timing-function

#flipimagediv img {
width: 400px;
height: 300px;
position: absolute;
transition-property: opacity;
transition-duration: 3s;
transition-timing-function: linear;
}

Last we need to change opacity of images on hover. We can do that  as following.


#flipimagediv #frontImage, #flipimagediv:hover #backImage {
opacity: 1;
}
#flipimagediv:hover #frontImage, #flipimagediv #backImage {
opacity: 0;
}

In this way we can flip images on hover using CSS 3.0. I hope you find this post useful. Thanks for reading.