title: Uncaught ReferenceError: $ is not defined after applying Bootstrap Template
body: <p>I am working on a MVC project. I downloaded a bootstrap theme called argon and tried to integrate with MVC. I referenced all the Argon related css and javascript files in Bundle.Config. 
      I think it got integrated successfully as well as i can use all the argon html elements now.
      Problem is i am not able to use jquery functions properly. I added jquery reference at the top of all other plugins . But always getting this error - 
      "Uncaught ReferenceError: $ is not defined".
      I searched and I know it is pretty common problem but did not find a suitable solution for this.
      Not sure where I am making the mistake.</p>
  
  <pre><code>Any suggestion would be helpful. TIA.
  
  
  This is what I have tried - 
  
  Bundle Config File :
  
              bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                          "~/Scripts/jquery-{version}.js",
                          "~/Argon/assets/vendor/jquery/jquery.min.js",
                          "~/Argon/assets/js/argon.min.js",
                          "~/Argon/assets/vendor/popper/popper.min.js",
                          "~/Argon/assets/vendor/bootstrap/bootstrap.min.js",
                          "~/Argon/assets/vendor/headroom/headroom.min.js",
                          "~/Argon/assets/vendor/onscreen/onscreen.min.js",
                          "~/Argon/assets/vendor/nouislider/js/nouislider.min.js",
                          "~/Argon/assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.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(
                        "~/argon/assets/vendor/bootstrap/bootstrap.js",
                        "~/argon/assets/vendor/bootstrap/bootstrap.min.js"));
  
              bundles.Add(new StyleBundle("~/Content/css").Include(
                        "~/Content/bootstrap.css",
                        "~/Content/site.css"));
  
              bundles.Add(new StyleBundle("~/Content/argon").Include(
                  "~/Argon/assets/css/argon.min.css",
                  "~/Argon/assets/css/bootstrap/bootstrap-grid.min.css",
                  "~/Argon/assets/css/bootstrap/bootstrap-reboot.min.css",
                  "~/Argon/assets/vendor/bootstrap-datepicker/css/bootstrap-datepicker.min.css",
                  "~/Argon/assets/vendor/font-awesome/css/font-awesome.min.css",
                  "~/Argon/assets/vendor/nouislider/css/nouislider.min.css",
                  "~/Argon/assets/vendor/nucleo/css/nucleo-svg.css",
                  "~/Argon/assets/vendor/nucleo/css/nucleo.css"
                  ));
  
  
  
  THE LAYOUT PAGE:
  
  
      @Styles.Render("~/Content/css")
      @Styles.Render("~/Content/argon")
      @Scripts.Render("~/bundles/modernizr")
  
      &lt;div class="container body-content"&gt;
          @RenderBody()
          &lt;hr /&gt;
          &lt;footer&gt;
              &lt;p&gt;&amp;copy; @DateTime.Now.Year - My ASP.NET Application&lt;/p&gt;
          &lt;/footer&gt;
      &lt;/div&gt;
  
      @Scripts.Render("~/bundles/jquery")
      @*@Scripts.Render("~/bundles/bootstrap")*@
      @RenderSection("scripts", required: false)
  &lt;/body&gt;
  &lt;/html&gt;
  
  
  
  THE INDEX PAGE:
  
  @{
      ViewBag.Title = "Home Page";
  }
  
  
  &lt;div&gt;
      &lt;div class="form-group"&gt;
          &lt;div class="input-group input-group-alternative"&gt;
              &lt;div class="input-group-prepend"&gt;
                  &lt;span class="input-group-text"&gt;&lt;i class="ni ni-calendar-grid-58"&gt;&lt;/i&gt;&lt;/span&gt;
              &lt;/div&gt;
              &lt;input class="form-control datepicker" id="dtTime" placeholder="Select date" type="text"/&gt; 
              &lt;button type="button" id="btnDate" class="btn btn-outline-default"&gt;Default&lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  &lt;/div&gt;
  
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $("#btnDate").on('click', function (e) {
             var dtval = $('.datepicker').val();
             console.log(dtval);
          });
  
      });
  
  &lt;/script&gt;
  </code></pre>