Bootstrap template is not working in MVC application

Question

I am trying to use free Bootstrap template from https://bootswatch.com/superhero/Bootstrap Bootstrap. I copied bootstrap.css and bootstrap.min.css from this site and pasted into my application but my application is not showing navbar like this template. please find the attached screenshot from this site and my home page.

From this site:

from my application:

My _Layout.cs:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse 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>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

My BundleConfig.cs:

 public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));
            bundles.Add(new StyleBundle("~/Content/bootstrap").Include(
    "~/Content/bootstrap.css",
    "~/Content/bootstrap-theme.css"));

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

Any suggestion is highly appreciated. Thank you.

Possible duplicate of [How can I implement a theme from bootswatch or wrapbootstrap in an MVC 5 project?](https://stackoverflow.com/questions/21839351/how-can-i-implement-a-theme-from-bootswatch-or-wrapbootstrap-in-an-mvc-5-project) — core114, Dec 26 '17 at 12:01

TC55 · Accepted Answer · 2018-02-02T11:16:36.460

You are probably not using the same Bootstrap version as the one being used for the Bootswatch theme. I had the same problem and opened an issue on Github, where Thomas Park gave me the following answer:

Yup, just make sure you're on the same version as the Bootstrap being used. Right now v4 is on bootswatch.com, but you can grab older versions at https://bootswatch.com/3/ and https://bootswatch.com/2/

So, try updating your Bootstrap version OR using a previous version of the Bootswatch theme you want (from the links above).

Source: https://github.com/thomaspark/bootswatch/issues/784

Jaggan_j · Answer 2 · 2019-05-03T12:49:06.963

In my _Layout.cshtml file, I have given the Scripts and Styles like this, together, on the head section:

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/Custom")
</head>

In your Bundle Config file, I don't think you need two separate statements to include the same bootstrap.css file.

score -1 · Answer 3 · answered Dec 26 '17 at 17:09

-1

Instead of using bundles.config and render scripts.Just download the bootstrap.min.css file and copy it into one of the folders in your MVC project. In the _layout.cshtml file,drag and drop that css file inside the tag. It must work. Try it.

answered Dec 26 '17 at 17:09

Sudeep Shrestha

128
2
14

Bootstrap template is not working in MVC application

3 Answers3