CODEWITHSUNDEEP
asp.netasp.net-mvctwitter-bootstraptwitter-bootstrap-3asp.net-mvc-5
teh0wner
teh0wner

Reputation: 1393

ASP.NET MVC 5 and Bootstrap 3

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.

Upvotes: 13

Views: 15691

Answers (3)

user1575089
user1575089

Reputation: 1

One other thing to keep in mind; if you are using unobtrusive validation, you will need to update the package to get client side validation working.

Update-Package Microsoft.Jquery.Unobtrusive.Validation

Otherwise, your page will post to validate.

Upvotes: 0

Dmitry Efimenko
Dmitry Efimenko

Reputation: 11203

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

Upvotes: 2

Olav Nybø
Olav Nybø

Reputation: 11568

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>

Upvotes: 9

Related Questions