Using Bootstrap 3 with Visual Studio 2013 ASP.NET MVC template

You might have an impression of "Déjà Vu" while reading this post. It is an updated version of a previous one about Bootstrap 3 RC.

With Visual Studio 2013 Preview, the ASP.NET Team made a huge step into the “One ASP.NET” template that can do what you want easily. The new ASP.NET MVC template includes a lot of very interesting libraries to help you improve your web site and accelerate your development. One of these libraries that comes by default is Bootstrap.

Bootstrap is a really powerful Web framework, not only for its grid system, but for the responsive design and cross-browser compatibility it provides. The Twitter Bootstrap team has just released the final release for Bootstrap 3 on August, 19th.

The ASP.NET MVC base template that comes with Visual Studio 2013 uses Bootstrap 2.3. Instead of using this version, I chose to convert everything needed to use the version 3 of Bootstrap with my new project. Here is the complete procedure if you want to do the same.

  • With Visual Studio 2013 Preview, create a new ASP.NET MVC project.
  • Update the Boostrap package to 3.0 by using the NuGet Packages Manager. This will also update jQuery to version 1.9.1 because Bootstrap 3 requires at least jQuery 1.9.0 to work correctly.
  • By updating jQuery, you need to update jQuery Validation too.
  • In order to allow Bootstrap to work for older (* couch *) IE browsers, you must also install 2 other NuGet packages : Html5shiv and "Response JS"

If you are more a command-line guy, here is the fast track recipe to setup your project by using the Package Manager Console on VS 2013:

Update-Package Bootstrap
Update-Package jQuery.Validation
Install-Package Respond
Install-Package html5shiv

Many small adjustments are required to fully use the version 3. The Bootstrap team provides a complete list to help you migrate from 2.x to 3.0.

Here, the list of modifications needed file by file.

App_Start\BundleConfig.cs

Add the line "~/Content/bootstrap-theme.css", in this block:

bundles.Add(new StyleBundle("~/Content/css").Include(
                            "~/Content/bootstrap.css",
                            "~/Content/bootstrap-theme.css",
                            "~/Content/site.css",
                            "~/Content/bootstrap-responsive.css"));

Add this block if you installed RespondJS and Html5Shiv:

bundles.Add(new ScriptBundle("~/bundles/oldIEBrowsersSupport").Include(
            "~/Scripts/respond.js",
            "~/Scripts/html5shiv.js"));

Views\Shared\_Layout.cshtml

If you have installed Respond and Html5Shiv, you must add this at the end of the head section.

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  @Scripts.Render("~/bundles/oldIEBrowsersSupport")
<![endif]-->

Edit the navigation section for the following:

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle"
                    data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Application name", "Index", "Home", null,
                                new { @class = "navbar-brand" })
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>

Views\Shared\_LoginPartial.cshtml

One section of the navigation is included in the _LoginPartial.cshtml. Two modifications are required on this file:

  • Remove the class in the BeginForm element
  • Both ul element must have the exact same list of class elements : nav navbar-nav navbar-right

Result :

@using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
    using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "" }))
    {
        @Html.AntiForgeryToken()

        <ul class="nav navbar-nav navbar-right">
            <li>
                @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Manage", "Account", routeValues: null, htmlAttributes: new { title = "Manage" })
            </li>
            <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
        </ul>
    }
}
else
{
    <ul class="nav navbar-nav navbar-right">
        <li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
        <li>@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
    </ul>
}

Views\Home\Index.cshtml

That’s all for the layout but the main page of the site requires some modifications also:

  • In the first div of the file, replace hero-unit for jumbotron (the default theme of BootStrap). Other themes are available on the Bootstrap Web Site and on other sites like WrapBootstrap and the Bootstrap section on ThemeForest
  • Replace all (3) span4 by col-md-4 class elements
  • For every anchor (3), add the class element btn-default in addition to btn that is already there. You can also pick another style for your buttons here.

Views\Home\About.cshtml

Finally, two easy fixes are needed here:

  • Simply replace the class element row-fluid by row
  • Change span12 by col-md-12

There you go!

Hope that these steps will help you move smoothly to Bootstrap 3, helping you continue to embrace all new stuff the that is available these days for the modern Web.

If you want to see the final result, you can go at : http://templatebootstrap3.azurewebsites.net

Post on September 7, 2013 at 12:00 AM.
blog comments powered by Disqus