Prerequisites: VS2013, MVC 4
First let’s create a default MVC4 application using VS.
Go to menu File –> New Project –> Installed –> Templates –> Visual C# –> Web –> Select “ASP.NET MVC 4 Web Application” –> name application as “MVC_Bootstrap”
Now just run the application and see if everything is working. Sounds good….
Now right click the MVC_Bootstrap web project –> Manage Nuget Package –> Online –> in top right search text area enter “bootstrap” and click search. (look for package created by: Twitter, Inc)
The above step, would add bunch of bootstrap css files in Content folder and bunch of JS files in Scripts folder. Plz verify… Sounds good.
Open the _layout.cshtml file and below tags in HEAD section or you can add proper bundle configuration in App_Start/BundleConfig.cs file
<link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap-theme.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
Things to know about Bootstrap :
css class “container-fluid”: This is usually applied to main DIV of the body. This div should hold entire HTML for proper layout.
css class “row”: All rows should be applied with this class, this applies width in percentage. If you want to go with PX go with row-fluid.
Entire screen width is divided into 12 equal columns ( 1 to 12)
For our application we will have header and the followed by content
1) First let’s fix _Layout.cshtml page, so open this page and remove all html (HEADER, BODY & FOOTER) content inside the body tag
2) Let’s add 3 div’s as shown below. So here what we are doing is we are creating a container div and adding 3 div’s
a) header,
b) body and
c) footer
3) Each row is embedded with a column of width
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<h6> HEADER </h6>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
@RenderBody()
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<h6> FOOTER </h6>
</div>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</div>
</div>
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
Now lets add below action in HOME controller
public ActionResult MyForm()
{
return View();
}
Add MyForm.cshtml in folder Views ==> Home
add below content to MyForm CSHTML. In this we have divided column into sum of 12 .
<div class="container-fluid"> <div id="MyForm" class="row"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="row"> <div class="col-sm-1 col-md-1 col-lg-1"> <div class="labelClass">Name:</div> </div> <div class="col-sm-2 col-md-2 col-lg-2"> <select id="User" name="User" style="width: 100%"> <option>Select</option> <option>User1</option> </select> </div> <div class="col-sm-1 col-md-1 col-lg-1"> <div class="labelClass">Lead Name:</div> </div> <div class="col-sm-2 col-md-2 col-lg-2"> <input id="LeadName" name="LeadName" type="text" value="" style="width: 100%"> </div> <div class="col-sm-1 col-md-1 col-lg-1"> <div class="labelClass">Date:</div> </div> <div class="col-sm-2 col-md-2 col-lg-2"><input type="date" style="width: 100%" /> </div> <div class="col-sm-1 col-md-1 col-lg-1"> <div class="labelClass">Country:</div> </div> <div class="col-sm-2 col-md-2 col-lg-2"> <select id="Country" name="Country" style="width: 100%"> <option>Select</option> <option>Select 1</option> </select> </div> </div> </div> </div> </div>
Now when you run this application this all controls would be aligned properly.
Now try to resize the window to as small as you can and you would notice that the controls would auto align themselves one below another. You can also change your screen resolution and verify the same.
Happy Kooding… Hope this was helpful…..!
Surya Prakash 