Twitter Bootstrap not functioning properly for Asp.Net MVC 4 application

Question

I'm starting a new project with asp.net mvc4 internet application.

First thing I did was install a package called Twitter Bootstrap for Asp.Net MVC 4 Sample via nuGet.

This installed other two packages Bootstrap and Twitter Bootstrap for Asp.Net MVC 4.

When I run the application,I get this

enter image description here

I didn't face this problem in previous projects. When I installed twitter bootstrap, things were fine when i built the application.

Can anyone explain or suggest, what might be going wrong?

Edit 1:

I have another project where bootstrap works fine. When I run the two projects in chrome and check the network, file that are loaded for both the projects are same.

Please check out the css/js files loaded perfectly?. See Network tab of chrome built in fiddle tool(Press F12) or FireBug for Firefox — Murali Murugesan
– Murali Murugesan, Commented Sep 30, 2013 at 15:36
I checked in chrome and the css and js file are loaded correctly, based upon the other project where twitter bootstrap works — Cybercop
– Cybercop, Commented Sep 30, 2013 at 15:44
Are you loading in the bootstrap scripts from a CDN? I know my local host usually has problems loading from external resources without the http: or https:. Many CDNs provide scripts with the protocol missing like <script src="//ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js"></script> for example. — John Lieb-Bauman
– John Lieb-Bauman, Commented Sep 30, 2013 at 15:55

SlaterCodes · Accepted Answer · 2013-10-02 01:47:24Z

0

There is a file BundleConfig.cs (or a specific BootstrapBundleConfig.cs) in your "App_start" folder of your MVC4 project.

It will have a declaration of something like this:

    // It won't look exactly like this.. 
    bundles.Add(new StyleBundle("~/Content/bootstrap/css/style").Include(
        "~/Content/bootstrap/css/bootstrap.css",
        "~/Content/bootstrap/css/bootstrap-theme.css"
        ));

Now you must go to your "Views/Shared/_Layout.cshtml" file (or whatever you base layout is) and add the following line within your head section.

<head>
 /// Other stuff in here 

// This renders the boostrap style
@Styles.Render("~/Content/bootstrap/css/style")

 // include any overrides to bootstrap you have after the library
</head>

answered Oct 2, 2013 at 1:47

SlaterCodes

1,15910 silver badges21 bronze badges

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

1 Comment

Cybercop Over a year ago

still didn't work, i'll post my bundleconfig and layout.cshtml file here

Collectives™ on Stack Overflow

Twitter Bootstrap not functioning properly for Asp.Net MVC 4 application

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related