Using Bootstrap 3 RC with ASP.NET MVC template

Wait, maybe you really search about Bootstrap RC, but the final release is now available and I wrote a new post specifically for this version.

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 first release candidate for Bootstrap 3 this week. Here is a quote from their blog post explaining what’s changed:

What's changed!?

With over ~1,600 commits, ~72,000 additions/deletions, and ~300 files changed, everything has changed. We've added features, removed features, and cleaned up a lot more. The v3 pull request on GitHub has all the details you'll need for a complete list of changes and some helpful migration tips.

I have just started a new Web project this week and I want to take this opportunity to completely enter into the wagon of these new features. So I read the Bootstrap documentation, a thing that I rarely do at first but I should do it more often, to realise after that this brand new version is not the one included by default with the Preview version of VS 2013. Instead of using the 2.3 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 before the new update of the ASP.NET MVC template that will probably be updated before the final release of VS 2013.

  • With Visual Studio 2013 Preview, create a new ASP.NET MVC project.
  • Uninstall the bootstrap package of the web project using the NuGet Packages Manager.
  • Download Bootstrap 3 RC files. The zip contain 2 folders, js and css.
  • If you want that your website can be responsive for IE8 too, you must download the respond.min.js file too.
  • In you web project, add the content of the js folder into the Scripts folder and the content of the css folder into the Contents folder
  • Modify the App_Start\BundleConfig.cs file for that :

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

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

The template is based on the Jumbotron Bootstrap example. Many other examples are available if you want a different look. Many small adjustments are required to fully use the version 3 :

Starting with the navigation, that is defined mostly in the Views\Shared_Layout.cshtml file

  • Completely remove the <div class="navbar-inner"> (but not his content, only the element and his corresponding ending element)
  • The button section define the element that will be displayed when the menu is collapse must be change that way : <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
  • That class of the ActionLink of your “Application Name” must be changed to : navbar-brand
  • You have to add this new class element to the next div : navbar-responsive-collapse and the navbar-nav class element to the child ul.

Result:

     <div class="navbar navbar-inverse navbar-fixed-top">
       <div class="container">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-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 class="nav-collapse collapse navbar-responsive-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>

One section of the navigation is included in the **_LoginPartial.cshtml** file in the same folder. Two modifications are required on that file:

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

That’s all for the layout, the main file of the site is Views\Index.cshtml and some modifications are also required there:

  • In the first div of the file, replace hero-unit for jumbotron
  • Replace all (3) span4 by col-lg-4 class elements
  • For every anchor (3), add the class element btn-default in addition to btn that is already there. You could pick another style for your buttons here.

Finally, two easy fixes are needed for Views\About.cshtml

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

Hope that these steps will help you move smoothly to Bootstrap 3, helping you continue to embrace all new stuff 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 July 29, 2013 at 12:00 AM.
blog comments powered by Disqus