Bootstrap not working with ASP.net MVC Bundling

Question

I am creating a simple login page in ASP.net MVC with bootstrap

BundleConfig.cs

public class BundleConfig
    {

        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.IgnoreList.Clear();

            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-1.9.1.js"));

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

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

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/bootstrapcss")
</head>
<body>
    @RenderBody()
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrapjs")
</body>
</html>

View: Index.cshtml

@model ME.Models.Admin.AdminModel

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/shared/_Layout.cshtml";
}

<center>
<div class="panel panel-primary" style="display:inline-block">
    Hello Admin! Please Login
    <br />

    <table>
        <tr>
            <td>@Html.LabelFor(m=>m.username)</td>
            <td>@Html.TextBoxFor(m=>m.username, new { @class = "form-control" })<br /></td>
        </tr>
        <tr>
            <td>@Html.LabelFor(m=>m.password)</td>
            <td>@Html.TextBoxFor(m=>m.password, new { @class = "form-control" })<br /></td>

        </tr>
        <tr>
            <td></td>
            <td><input type="submit" class="btn btn-primary" value="Log In" /></td>
        </tr>
    </table>

</div>
    </center>

On running the project, Controls are displayed but bootstrap classes are not applied to controls.

Under browser console I get 404 error for bundles:

/bundles/jquery
/bundles/bootstrapjs
/Content/bootstrapcss

I have used bundling and _Layout.cshtml in Shared directory under view folder.

Can someone help with this issue?

Note: I haven't pasted code of Model and controller since I believe it's not needed here.

Thanks.

Does the browser load the bundles or are there any errors? Why do you as both the minificated and the normal bootstrap css? — Markus
– Markus, Commented Jul 14, 2017 at 15:02
Try add BundleTable.EnableOptimizations = true; before creating a new bundle. — Bob Swager
– Bob Swager, Commented Jul 14, 2017 at 15:16
Yes. But i think that your solution should be something like this : stackoverflow.com/questions/13458642/… — Bob Swager
– Bob Swager, Commented Jul 14, 2017 at 15:23
@All. I am getting 404 error for /bundles/jquery, /bundles/bootstrapjs /Content/bootstrapcss. Do I have to create bundle directory?? — Dheeraj Kumar
– Dheeraj Kumar, Commented Jul 14, 2017 at 15:29

Dheeraj Kumar · Accepted Answer · 2017-07-14 17:31:26Z

3

protected virtual void Application_Start()
    {
        BundleConfig.RegisterBundles(BundleTable.Bundles);
    }

This was missing. Got it worked.

answered Jul 14, 2017 at 17:31

Dheeraj Kumar

4,2559 gold badges51 silver badges83 bronze badges

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

Collectives™ on Stack Overflow

Bootstrap not working with ASP.net MVC Bundling

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related