Building MVC 4 App With Bootstrap Layout

Surya Prakash
9y
9.7k
0
0

Article

Prerequisites: VS2013 and MVC 4

First let's create a default MVC4 application using Visual Studio.

In the menu select "File" -> "New" -> "Project..." then in the installed templates seelct Visual C# –> Web then select “ASP.NET MVC 4 Web Application” and name the application MVC_Bootstrap.

Now just run the application and see if everything is working. Sounds good.

Now right-click the MVC_Bootstrap web project and select Manage Nuget Package –> Online then in the top-right search text area enter “bootstrap” and click search. Look for the package created by Twitter, Inc.

The preceding step will add many bootstrap CSS files to the Content folder and many JavaScript files to the Scripts folder. Please verify. Sounds good.

Open the _layout.cshtml file and the following tags in the HEAD section or you can add a proper bundle configuration to the 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>

The following are things to know about Bootstrap:

CSS class “container-fluid”: This is usually applied to the main DIV of the body. This div should hold all the HTML for the proper layout.
CSS class “row”: All rows should be applied with this class, this applies the width as a percentage. If you want to go with PX go with row-fluid.

The entire screen width is divided into 12 equal columns (1 to 12).

For our application we will have a header followed by the content as in the following.

First let's fix the _Layout.cshtml page, so open this page and remove all the HTML (header, body and footer) content inside the body tag.
Let's add 3 divs as shown below. So here what we are doing is we are creating a container div and adding 3 divs.
1. header
2. body
3. footer
Each row is embedded with a column of width:
1. <body>
2. <div class="container-fluid">
3. <div class="row">
4. <div class="col-sm-12 col-md-12 col-lg-12">
5. <h6> HEADER </h6>
6. </div>
7. </div>
8. <div class="row">
9. <div class="col-sm-12 col-md-12 col-lg-12">
10. @RenderBody()
11. </div>
12. </div>
13. <div class="row">
14. <div class="col-sm-12 col-md-12 col-lg-12">
15. <h6> FOOTER </h6>
16. </div>
17. @Scripts.Render("~/bundles/jquery")
18. @RenderSection("scripts", required: false)
20. </div>
21. </div>
22. @Scripts.Render("~/bundles/jquery")
23. @RenderSection("scripts", required: false)
25. </body>
Now let's add the following action to the HOME controller:
1. public ActionResult MyForm()
2. {
3. return View();
4. }

Add MyForm.cshtml in folder Views ==> Home.

Add the following content to MyForm CSHTML. In this we have divided the column into a 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 all the controls will be aligned properly.

Now try to resize the window to as small as you can and you would see that the controls will auto-align themselves one below another. You can also change your screen resolution and verify that.

I hope this was helpful!

Up Next

Ebook Download

View all

ASP.NET MVC 5 Recipes: A Practical Solution

Read by 9.3k people

Download Now!

Learn

View all