title: Custom CSS Won't Work With Bootstrap
body: <p>First off I would like to say that I know I am not the most efficient or clean in my HTML.</p>
  
  <p>My problem is that the custom CSS I write does not apply to my webpage at all. Bootstrap seems to be working perfectly fine, but when I try to make any edits or overwrite Bootstrap it just flat out doesn't work. I know that my custom CSS file is linked properly because it's in the same directory as bootstrap.css</p>
  
  <p>Linking:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
  
  &lt;title&gt;Help Menu&lt;/title&gt;
  
  &lt;!--
  ==============================================================================================================
  
  REFERENCES (BOOTSTRAP 3.3.7) (jQuery 3.1.1)
  
  ==============================================================================================================
  --&gt;
  
  &lt;link href="/bootstrap/css/bootstrap.css" rel="stylesheet"&gt;
  &lt;link href="/bootstrap/css/custom.css" rel="stylesheet" &gt;
  &lt;script src="/bootstrap/js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;script src="/bootstrap/js/npm.js"&gt;&lt;/script&gt;
  &lt;script src="/jquery/jquery.js"&gt;&lt;/script&gt;
  
  &lt;!--
  ==============================================================================================================
  
  BOOTSTRAP REFERENCES DISTRO 3.3.7
  
  ==============================================================================================================
  
  --&gt;
  
  &lt;/head&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>For example I am able to change the background color of the panel using the <code>&lt;style&gt;</code> element:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
   &lt;div style="background-color: #4286f4;" class="panel panel-default"&gt;
    &lt;div class="panel-heading"&gt;&lt;h1&gt;What Do You Need Help With?&lt;/h1&gt;&lt;/div&gt;
  
     &lt;p&gt;
      &lt;div class="row"&gt;
       &lt;div class="col-sm-2"&gt; &lt;/div&gt;
        &lt;div class="col-sm-2"&gt;
         Frequent Problems
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
       &lt;div class="col-sm-2"&gt; &lt;/div&gt;
        &lt;div class="col-sm-2"&gt;
         Printers
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
       &lt;div class="col-sm-2"&gt; &lt;/div&gt;
        &lt;div class="col-sm-2"&gt;
         Drivers
        &lt;/div&gt;
      &lt;/div&gt;
     &lt;/p&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But I cant change the color of the panel using external CSS <em>(the following CSS snippet is in custom.css)</em>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.lukedbgcolor {
   background-color: #4286f4;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
   &lt;div class="panel panel-default lukedbgcolor"&gt;
    &lt;div class="panel-heading"&gt;&lt;h1&gt;What Do You Need Help With?&lt;/h1&gt;&lt;/div&gt;
  
     &lt;p&gt;
      &lt;div class="row"&gt;
       &lt;div class="col-sm-2"&gt; &lt;/div&gt;
        &lt;div class="col-sm-2"&gt;
         Frequent Problems
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
       &lt;div class="col-sm-2"&gt; &lt;/div&gt;
        &lt;div class="col-sm-2"&gt;
         Printers
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
       &lt;div class="col-sm-2"&gt; &lt;/div&gt;
        &lt;div class="col-sm-2"&gt;
         Drivers
        &lt;/div&gt;
      &lt;/div&gt;
     &lt;/p&gt;
   &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have tried putting the CSS at the very bottom of the bootstrap.css and I have also tried putting the <code>lukedbgcolor</code> class first like this: 
  <code>&lt;div class="lukedbgcolor panel panel-default"&gt;</code></p>
  
  <p>ALL help / advice / criticism is welcomed,
  Thanks!</p>