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.

make sure you mark questions as answered otherwise you may struggle to get people to spend time answering future questions. — Ryan McDonough
– Ryan McDonough, Commented Sep 17, 2013 at 20:46

Olav Nybø · Accepted Answer · 2013-09-15 16:41:53Z

9

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>

answered Sep 15, 2013 at 16:41

Olav Nybø

11.6k8 gold badges44 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ryan McDonough Over a year ago

Also bear in mind that the bootstrap asp validation will need some tweaking as it relies on the old html structure.

teh0wner Over a year ago

Great.. what I was looking for! Also found this link How would one go about doing that @RyanMcDonough

Ryan McDonough Over a year ago

Basically follow that guide, it includes updates to the validation by the looks of things.

Dmitry Efimenko · Accepted Answer · 2013-09-15 16:49:52Z

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.

answered Sep 15, 2013 at 16:49

Dmitry Efimenko

11.2k7 gold badges65 silver badges85 bronze badges

Comments

user1575089 · Accepted Answer · 2014-02-28 17:55:29Z

0

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.

answered Feb 28, 2014 at 17:55

user1575089

1

Collectives™ on Stack Overflow

ASP.NET MVC 5 and Bootstrap 3

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related