What is Twitter Bootstrap (TB) ?- TB is a Free (open source) collection of tools for creating web applications
- It contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and other interface components
- As well as optional JavaScript extensions
- TB has supported for HTML5 and CSS 3
- It is compatible with all major browsers
- It also supports Responsive Design
-
This means the graphic design of
web pages adjusts dynamically, taking into account
the
characteristics of the device used (PC, tablet, mobile phone)
How to Download Twitter Bootstrap ?Step 1 :
Step 2 :
- After unzip the content,You will have below mentioned folders
- CSS folders content is as below
- IMG folders content is as below
- JS folders content is as below
How to create Asp.Net MVC 3 project using Visual Studio 2010 ?
Step 1 : Click, File ==> New Project
Step 2 : Select, Internet Application Template
Step 3 : MVC 3 Internet Application Template generated Solution Explore is as below
How to add Twitter Bootstrap UI Framework for Asp.Net MVC 3 project ?
css and img :
- Create a folder named "bootstrap" under the Content folder
- Create 2 sub-folders named "css" and "img" under that
- Add the .css files into css folder and .png files into img folder
Note: The framework assumes that the .png images are located under a folder
named "img" under the parent folder of the folder in which the .css files are located
scripts :
- Create a folder named "bootstrap" under the Scripts folder
- Add the bootstrap javaScript files into it
After that solution explore looks like below
Lets try to add Bootstrap effects into our Asp.net MVC project
How to Add the Bootstrap CSS ?
- Open the _Layout.cshtml page
- Add the following 2 lines in the head tag at the end of its existing content
- You dont need to remove any of its existing content
- You need to make sure that bootstrap-responsive.min.css appears after the bootstrap.min.css
<head>
<link href="@Url.Content("~/Content/bootstrap/css/bootstrap.min.css")"
rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap/css/bootstrap-responsive.min.css")"
rel="stylesheet" type="text/css" />
</head>
How to Add Bootstrap JavaScript ?
- It is a good practice to add the JavaScript files at the end of the page content
- Add the following line at the end of the _Layout.cshtml file before ending the body tag
<script src="@Url.Content("~/Scripts/bootstrap/bootstrap.min.js")"
type="text/javascript"></script>
Lets add some Twitter Bootstrap css styles for our Asp.Net MVC UIs
Site.css
- Open the Site.css file
- Look for the "header h1, #header h1" styled item
- Replace it with the following code block
header h1, #header h1{
font-weight: normal;
padding: 5px 0;
margin: 0;
color: #5c87b2;
border: none;
line-height: 2em;
font-size: 20px !important;
text-shadow: 1px 1px 1px #111;
}
- Look for #logindisplay, #logindisplay a:link, #logindisplay a:visited and #logindisplay a:hover styled items
- Change the color property to #555 instead of white
- Replace it with following code block
#logindisplay{
font-size: 1.1em;
display: block;
text-align: right;
margin: 10px;
color: #555;
}
#logindisplay a:link
{
color: #555;
text-decoration: underline;
}
#logindisplay a:visited
{
color: #555;
text-decoration: underline;
}
#logindisplay a:hover
{
color: #555;
text-decoration: none;
}
Lets Modify Body
- Open _Layout.cshtml page
- Replace it with following code block
_Layout.cshtml (complete code)<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet"
type="text/css" />
<link href="@Url.Content("~/Content/bootstrap/css/bootstrap.min.css")"
rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap/css/bootstrap-responsive.min.css")"
rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container-fluid">
<div id="header" class="row-fluid">
<div id="title">
<h1>
My MVC Application</h1>
</div>
<div id="logindisplay">
@Html.Partial("_LogOnPartial")
</div>
</div>
<div id="" class="row-fluid">
<div class="navbar">
<div class="navbar-inner">
<div class="container-fluid">
<div class="nav-collapse">
<ul class="nav">
<li class="@(ViewBag.Active == "Home" ? "active" : "")">
@Html.ActionLink("Home", "Index", "Home")
</li>
<li class="divider-vertical"></li>
<li class="@(ViewBag.Active == "About" ? "active" : "")">
@Html.ActionLink("About", "About", "Home")
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="" class="row-fluid">
@RenderBody()
</div>
<div id="footer" class="row-fluid">
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">
</script>
<script src="@Url.Content("~/Scripts/bootstrap/bootstrap.min.js")"
type="text/javascript"></script>
</body>
</html>
Lets Modify Home Page- Open Index.cshtml page
- Replace it with following code block
Index.cshtml (complete code)
@{
ViewBag.Title = "Home Page";
ViewBag.Active = "Home";
}
<div class="hero-unit">
<h2>@ViewBag.Message</h2>
<p>
This is a template to demonstrate the way to beautify the default
MVC3 template using Twitter Bootstrap website. It is pretty
simple and easy.
</p>
<p>
<a href="http://asp.net/mvc" class="btn btn-primary btn-large"
style="color: White;">
To learn more about ASP.NET MVC visit »</a>
</p>
</div>
Lets Modify About Page- Open About.cshtml page
- Replace it with following code block
About.cshtml (complete code)
@{
ViewBag.Title = "About Us";
ViewBag.Active = "About";
}
<div class="row-fluid">
<div class="span4">
<h2>
About 1</h2>
<p>
Your About 1 details.Your About 1 details.Your About 1 details.
Your About 1 details.Your About 1 details.Your About 1 details.
Your About 1 details.Your About 1 details.Your About 1 details.
</p>
<p>
<a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>
About 2</h2>
<p>
Your About 2 details.Your About 2 details.Your About 2 details.
Your About 2 details.Your About 2 details.Your About 2 details.
Your About 2 details.Your About 2 details.Your About 2 details.
</p>
<p>
<a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>
About 3</h2>
<p>
Your About 3 details.Your About 3 details.Your About 3 details.
Your About 3 details.Your About 3 details.Your About 3 details.
Your About 3 details.Your About 3 details.Your About 3 details.
<p>
<a class="btn" href="#">View details »</a></p>
</div>
</div>
Thats it.Youre done.
- Now the Asp.net MVC 3 project with Twitter Bootstrap Template should look like below
Home page (portion)
About page (portion)
Do you need to Download This Sample Project ?
Do you need to dive deep ends of Twitter Bootstrap ?
Conclusion
- Bootstrap is a Toolkit from Twitter designed to kick-start development of web-apps and sites
- You can design highly professional and more sophisticated web sites with minimum effort by using Bootstrap
- It is Tested and supported in the major modern browsers, such as the Latest versions of Safari, Google Chrome, Firefox 5+, and Internet Explorer 7+
- With Bootstrap 2.0 and later, Mobile browsers are also supported
- So Try to use TB with your web projects and Enjoy it
I hope this helps to You.Comments and feedback greatly appreciated.
If you feel it was a good article,Give me a +1.Thank You.
Happy Coding.
May Be Useful for You
How to Improve jQuery Selector Performance ?How to Enable jQuery Intellisense in Visual Studio 2010 ?
I love USB flash drives. I think these little suckers are one of the best things to hit computers since sliced bread. I used a flash drive almost every day this past semester of school and boy was it a nifty thing to keep around. Almost every piece of school work I had to do this past semester is on my trusty 2GB Toshiba flash drive.
Put your eye on the problem with 
