CODEWITHSUNDEEP
cssasp.net-mvctwitter-bootstrap
Raj
Raj

Reputation: 555

Bootstrap template is not working in MVC application

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: enter image description here

from my application:

enter image description here

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.

Upvotes: 0

Views: 4038

Answers (3)

Jaggan_j
Jaggan_j

Reputation: 518

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.

Upvotes: 0

TC55
TC55

Reputation: 77

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

Upvotes: 2

Sudeep Shrestha
Sudeep Shrestha

Reputation: 128

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.

Upvotes: -1

Related Questions