What is Bootstrap?
Twitter Bootstrap was created by two guys at Twitter who wanted to speed up and bootstrap their workload and code. Bootstrap framework is used to develop front facing web applications and sites. When we work on the project there are many things that are required in nearly every project. For example a Grid, Tables, Forms, Buttons and so on. These are the common requirements of any project. With these you can make a web project up and running quickly and easily. The Bootstrap framework provides you all those components. The entire framework is module based, you can customize it with your own bit of CSS. It also provides JavaScript plugins for things like tooltips, popovers, modals and more.
Download Bootstrap
To get your application running quickly with Twitter Bootstrap, let us start by downloading and installing Bootstrap. You can download that from here.
Bootstrap File Structure
After downloading Bootstrap from the preceding link. You will see a zip folder. Once unzipped, you will find that there are several files and folders available within the root folder bootstrap.
![Bootstrap Download File]()
I am using Visual Studio IDE. Now add these folders to the Visual Studio folder structure and expand every folder; that will look such as the following:
![Bootstrap File Structure]()
It contains a set of files, namely css, js and font.
The css folder has a style sheet to design the Twitter Bootstrap project.
The js folder has JavaScript files with various JavaScript plugins in separate files that we will use in our website designs.
The last folder Font contains two sets of images, both are exactly the same except for their foreground color.
Include with HTML
Next, it’s time to include them into the project.
So let’s imagine we have a blank HTML file that goes something like this:
HTML file
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Now we need to add a reference to the bootstrap CSS file and JS file with the html file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
Note: Also don’t forget to include jQuery if you’ll be using Bootstraps JS plugins.
Using bootstrap CSS class="nav nav-list"
Now, you need to add the nav-list class in addition to the nav class that will make it look like a list. And adding class nav-header” to any li element of the nav class will make it look like a heading to the section of links. The HTMl File looks such as in the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="Bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<ul class="nav nav-list">
<li class="nav-header">Category</li>
<li><a href="#">.NET</a></li>
<li><a href="#">ASP.NET</a></li>
<li><a href="#">Silverlight</a></li>
<li><a href="#">WCF</a></li>
<li class="nav-header">Database</li>
<li><a href="#">SQL Server</a></li>
<li><a href="#">Oracle</a></li>
<li><a href="#">MySQL</a></li>
</ul>
</body>
</html>
Now see how the list is rendering.
![List in Bootstrap]()
Summary
In this article, we saw how to download and get started with Bootstrap.