What is Twitter Bootstrap? Well, I will answer this question in a future article. In this article 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.
![Bootstrap-1.jpg]()
After downloading, unzip the folder and you will find the following subfolders inside that. The folder's names are very much self-explanatory. CSS files are in a CSS folder and JS files are in a JS folder.
![Bootstrap-2.jpg]()
Next you need to add the Bootstrap files to your project structure. The Visual Studio folder structure should look such as the following:
![Bootstrap-3.jpg]()
Now a typical HTML file looks like 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" />
</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 in the following:
![Bootstrap-4.jpg]()
You can add Bootstrap CSS and JS references in the same way we add the usual CSS and JS references.
![Bootstrap-5.jpg]()
After adding the references for the Bootstrap CSS and JS HTML it should look like 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>
<h1>Bootstarp Sample</h1>
<div>I am here to decide about my Ideas ! Okay ?</div>
</body>
</html>
Now we have added the Bootstrap CSS and the HTML will render as in the following. You will sse the difference in typography and the way H1 and DIV elements are rendering now.
![Bootstrap-6.jpg]()
Now let us see how easy it is to differentiate various kinds of messages in Bootstrap. For example if we want to show an error message then that can be done by setting the class of a paragraph.
![Bootstrap-7.jpg]()
In the same way an information message can be displayed as in the following,
![Bootstrap-8.jpg]()
We can show various kinds of messages in the application as easily as depicted in the 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 various kinds of messages will render as in the following:
![Bootstrap-9.jpg]()
Let us take another example of a table. You can create a table with some rows as in the 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>
On rendering the HTML above in the browser you will get the table as in the following. Certainly this table is not looking very impressive.
![Bootstrap-10.jpg]()
Using Bootstrap we can style the table as easily as setting the class value. If you set the class of the table as table then the table will stretch to the all width available.
![Bootstrap-11.jpg]()
And see how the table is rendering now.
![Bootstrap-12.jpg]()
If you want to strip the table then that can be done by just setting the class value. A stripped table can be created in Bootstrap as in the following:
![Bootstrap-13.jpg]()
As an output table will render as given in the following image:
![Bootstrap-14.jpg]()
The full source code of the stripped table above is as follows:
<!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 article we focused on getting started with Bootstrap. In further posts we will get into the details of other aspects of Bootstrap. I hope you find this article useful. Thanks for reading.