Bootstrap with ASP.NET MVC 4 – Sample Source Code

This is the continuation of the article Bootstrap with ASP.NET MVC 4 – Step by Step – Without NuGet Package. Here is the sample source code for the files _Layout.cshtml, Index.cshtml and HomeContainer.cs, which I’ve modified and created for the step by step instruction.

Use this code and follow the step by step instructions explained in Bootstrap with ASP.NET MVC 4 – Step by Step – Without NuGet Package.

Sample Source Code of BundleConfig.cs: (Download BundleConfig.cs)

using System.Web;
using System.Web.Optimization;

namespace MyTecBits_Bootstrap_MVC
{
    public class BundleConfig
    {

        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.IgnoreList.Clear();

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrapjs").Include(
                        "~/Scripts/bootstrap.min.js"));

            bundles.Add(new StyleBundle("~/Content/bootstrapcss").Include(
                        "~/Content/bootstrap.min.css",
                        "~/Content/bootstrap-responsive.min.css"));
        }
    }
}

Sample Source Code of _Layout.cshtml: (Download _Layout.cshtml)

<!--<span class="hiddenSpellError" pre=""-->DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width" />
 <title>@ViewBag.Title</title>
 @Styles.Render("~/Content/bootstrapcss")
</head>
<body>
 <div class="container-fluid">
 <div class="row-fluid">
 <div class="span3">
 <div class="well sidebar-nav">
 <ul class="nav nav-list">
 <li class="nav-header">1st Navigation Header</li>
 <li>@Html.ActionLink("Link 1","../")</li>
 <li>@Html.ActionLink("Link 2","../")</li>
 <li>@Html.ActionLink("Link 3","../")</li>
 <li>@Html.ActionLink("Link 4","../")</li>
 <li class="nav-header">2nd Navigation Header</li>
 <li>@Html.ActionLink("Link AA","../")</li>
 <li>@Html.ActionLink("Link BB","../")</li>
 <li>@Html.ActionLink("Link CC","../")</li>
 </ul>
 </div>
 </div>
 <div class="span9">
 @RenderSection("featured", required: false)
 <div class="row-fluid">
 @RenderBody()
 </div>
 </div>
 </div>
 </div>
 @Scripts.Render("~/bundles/jquery")
 @Scripts.Render("~/bundles/bootstrapjs")
</body>
</html>

Sample Source Code of view file Index.cshtml: (Download Index.cshtml)

@{
 ViewBag.Title = "Index View - My tec Bits";
}
@section featured {
 <div class="hero-unit">
 <h1>Welcome to www.MyTecBits.com</h1>
 <p>This is my first ASP.NET MVC4 with Bootstrap website........</p>
 </div>
}
Some content goes here........
@Html.ActionLink("Home >>","../", null,new { @class="btn btn-primary btn-large" })

Sample Source Code of Controller File HomeController.cs: (Download HomeController.cs)

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MyTecBits_Bootstrap_MVC.Controllers
{
 public class HomeController : Controller
 {
 //
 // GET: /Home/

public ActionResult Index()
 {
 return View();
 }

}
}

Instructions for using the above sample source code is explained in  Bootstrap with ASP.NET MVC 4 – Step by Step – Without NuGet Package.

Output of the sample code:

Bootstrap-MVC-NoNuGet-20

6 comments for “Bootstrap with ASP.NET MVC 4 – Sample Source Code

  1. February 1, 2016 at 2:44 pm

    thx for the tutorial…but how cai i add another page to link 1

  2. Katrin
    June 18, 2014 at 4:00 pm

    I can’t make it work with IE 9. Is anybody having similar issues?

    • Katrin
      June 19, 2014 at 8:20 am

      I found the solution. Some posts were suggesting putting
      at the top but that didn’t actually fix it. The thing that fixed it was:

      So here is the top of the final version of my _Layout.cshtml:

      @ViewBag.Title

  3. Shilpa
    May 14, 2014 at 3:45 am

    awesome..thanks :)

  4. April 9, 2014 at 8:34 pm

    this is good tutorial :-)

Leave your thoughts...