CSS bundling in MVC 4
<p>I'm building a web application in MVC 4. I'm using bootstrap to design my UI.
I have included my bootstrap files to the BundleConfig.cs file on my solution to reduce file size and optimize my site responsiveness and load speed. Rendering a view page and referencing the bundle name doesn't seem to output the required result for me. </p>

<p>I tried referencing bootstrap through CDN and it works so I think the fault is in the bundling. However I cannot figure out the faults. Any help is appreciated. Thank You. </p>

<p><strong>BundleConfig.cs</strong></p>

<pre><code>using System.Web;
using System.Web.Optimization;

namespace TMS
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.IgnoreList.Clear();

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

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

        bundles.Add(new StyleBundle("~/Content/BootstrapFiles").Include(
            "~/Content/bootstrap.min.css",
            "~/Content/bootstrap-responsive.min.css",
            "~/Content/bootstrap.css",
            "~/Content/bootstrap-responsive.css"));

        //BundleTable.EnableOptimizations = true;
    }
}
}
</code></pre>

<p><strong>_Layout.cshtml</strong></p>

<pre><code>&lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;meta name="viewport" content="width=device-width" /&gt;
    &lt;title&gt;@ViewBag.Title&lt;/title&gt;
&lt;!--    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt; --&gt;
    @Styles.Render("~/Content/BootstrapFiles")
&lt;/head&gt;
</code></pre>

<p>and in the body of the page i'm trying to have navbar that is black and aligned to the right</p>

<pre><code>&lt;nav class="navbar navbar-inverse"&gt;
    &lt;div class="container-fluid"&gt;
        &lt;div class="navbar-header"&gt;
            &lt;a class="navbar-brand" href="#"&gt;Welcome to Sri Lanka!&lt;/a&gt;
        &lt;/div&gt;

        &lt;ul id="menu" class="nav navbar-nav navbar-right"&gt;
            &lt;li&gt;@Html.ActionLink("Home", "Index", "Home")&lt;/li&gt;
            &lt;li&gt;@Html.ActionLink("About", "About", "Home")&lt;/li&gt;
            &lt;li&gt;@Html.ActionLink("Contact", "Contact", "Home")&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/nav&gt;
</code></pre>

<p>P.S. I've also set the debug mode false in my main web.config file
    </p>