ASP.NET MVC 5 and Bootstrap 3

Question

Been looking around the nets for a bit more information but couldn't find much.

So I have created a new MVC 5 Project in VS 2013 RC which comes pre-installed with bootstrap 2.3.1

Everything works like a charm, but since Bootstrap 3 is out (and me wanting to use the LESS version and not pre-compiled CSS) I removed bootstrap 2.3.1 from NuGet and installed Bootstrap LESS.

I know the folder structure is slightly different, but I have edited my BundleConfig to accommodate for that. Everything seems to compile fine, all the JS are there, but when trying to view the web page it looks messed up.

Does Bootstrap 3 have completely different HTML template (i.e. do I need to change _Layout ?) or should the _Layout that came with 2.3.1 work with v3 as well?

I hope my question is clear.

Answer 1

There are some differences between Bootstrap 3 and Bootstrap 2.3.1.

I have made some changes to my _Layout to make it more Bootstrap 3 friendly.

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex5-collapse">
            <span class="sr-only">Toggle navigation</span>
            <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 navbar-ex5-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>
</nav>

Answer 2

Bootstrap 3 changed things around and now requires different html here and there. You can easily confirm that by looking at their documentation pages.