Understanding the Grid Layout in Bootstrap

With each passing day, new devices with new screen sizes are popping up – and as web developers, we need to create web applications that are responsive to these various screen sizes. There are multiple ways you can create a responsive layout, however I find Bootstrap grid layout to be the easiest. In this post, we will cover various aspects of the Bootstrap Grid system with various examples. To start with let us create a four equal column layout for medium-sized devices in Bootstrap Grid system.

image

 

4 equal columns layout

To create the layout, you need to complete the following steps:

  1. Create a div with class container for fixed width or container-fluid for the full width of the screen
  2. Create a div with class row. Div with the class row must be inside container
  3. Create 4 divs for 4 columns. Div of the column must be the immediate child of the row div
  4. Content will be inside the column div

To create four equal columns in a row, I have created four divs with the class set at col-md-3 as shown in the listing below:

Read full article on the Infragistics blog

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.

Creating a round button in CSS 3.0

In this post we will learn creating a round button in HTML 5 and CSS 3.0. Let us say we have a HTML button as following,


<!DOCTYPE html>
<html>
<head>

<link href="demo.css" rel="stylesheet" />
<title>
Round Button Demo
</title>

</head>
<body>

<button>Push Me</button>

</body>
</html>

At this point if you render above HTML in browser, button would be rendered as following,

image

We can make this button a round button using CSS 3.0. By setting value of border-radius to 100% , you can make a button round.


button {
height: 200px;
width: 200px;
border-radius : 100%;
background-color: #C91826;
}

At this point if you render above HTML in browser, button would be rendered as following,

image

You notice here is that text on button is not that immersive. We can make that more immersive by setting other CSS attributes as following,


button {
height: 200px;
width: 200px;
border-radius : 100%;
background-color: #C91826;
color: #fff;
font-weight: bold;
font-size: 40px;
text-decoration: none;
text-align: center;
text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
margin-left : auto;
margin-top : 30px;
margin-bottom : 40px;
margin-right : auto;
border: 1px solid;
border-color: #B21522;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;

}

At this point if you render above HTML in browser, button would be rendered as following,

image

In this way you can create a round button in HTML5 and using CSS 3.0. I hope you find this post useful. Thanks for reading.