Search code examples
twitter-bootstrapasp.net-mvc-5

ASP.NET MVC - Bootstrap classes not loading after referencing


I have created a sample MVC 5 project for practice purpose and copied some HTML code with Bootstrap classes from a blog, but i see the bootstrap classes are not being applied as expected.

I am not seeing any error as well in the browser console but still the classes are not getting applied accordingly.

Output

Layout file

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="~/Content/bootstrap.min.css" />
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
   
</head>
<body>

    <div class="container body-content">
        @RenderBody()

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

</body>
</html>

View

       <form class="form-horizontal">
       <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">Create Employee</h3>
        </div>
        <div class="panel-body">
            <div class="form-group">
                <label class="col-sm-2 control-label" for="fullName">Full Name</label>
                <div class="col-sm-8">
                    <input id="fullName" type="text" class="form-control">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label" for="email">Email</label>
                <div class="col-sm-8">
                    <input id="email" type="text" class="form-control">
                </div>
            </div>

        </div>
        <div class="panel-footer">
            <button class="btn btn-primary" type="submit">Save</button>
        </div>
    </div>
</form>

Bundle Config

 public class BundleConfig
        {
            // For more information on bundling, visit https://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 https://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"));
    
                bundles.Add(new StyleBundle("~/Content/css").Include(
                          "~/Content/bootstrap.css",
                          "~/Content/site.css"));
            }
        }

Solution

  • I believe the bootstrap CSS and JS scripts are not being targeted well in your source file, check the use of the tilde from this post

    use of tilde (~) in asp.net path