title: How to use Bootstrap/static files in Django templates
body: <p>Okay so I know there are a lot of SO questions on this and I have combed through all of them trying to find an answer but nothing was exactly what I was looking for.</p>
  <p>My issue is that whenever I try to load the static files into a Django template it just won't work.
  Here is my file structure:</p>
  <pre><code>MainProjectDir
  |
  +-- DjangoProject
  |  |
  |  +-- MainDjangoSub
  |  |  |
  |  |  +-- __init__.py
  |  |  +-- settings.py (all the other usual folders below)
  |  |
  |  +-- StaticPages (this is my App directory)
  |  |  |
  |  |  +-- templates (will contain all templates for StaticPages app)
  |  |  |  |
  |  |  |  +-- StaticPages (directory containing html templates for the Static Pages App)
  |  |  |  |  |
  |  |  |  |  +-- main.html
  |  |  |  |  +-- navbar.html
  |  |  |
  |  |  +-- __init__.py
  |  |  +-- views.py (all other usual app files below)
  |  |
  |  +-- static (contains all static files for the project)
  |  |  |
  |  |  +-- Bootstrap (subdirectory containing the Bootstrap static files)
  |  |  |  |
  |  |  |  +-- css (directory containing all css files from Bootstrap precompiled files)
  |  |  |  +-- js (directory containing all js files from Bootstrap precompiled files)
  |  +-- manage.py
  </code></pre>
  <p>My the settings in my settings file pertaining to static files:</p>
  <pre><code>INSTALLED_APPS = [
      'django.contrib.admin',
      'django.contrib.auth',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.messages',
      'django.contrib.staticfiles',
      'StaticPages',
  ]
  
  STATIC_URL = '/static/'
  
  
  STATICFILES_DIRS = [
      os.path.join(BASE_DIR, 'static')
  ]
  </code></pre>
  <p>In my views.py file under the StaticPages app I have this view to render my templates:</p>
  <pre><code>def home(request):
      return render(request, 'StaticPages/main.html')
  </code></pre>
  <p>So here we get to my issue. In the main.html file I use <code>{% load static %}</code> to load the static files and then inside any calls to css or js files I do something similar but pycharm highlights the text and says &quot;cannot resolve directory ...&quot; Here is a sample of my html file:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  {% load static %}
  
  &lt;head&gt;
      &lt;meta charset=&quot;UTF-8&quot;&gt;
      &lt;title&gt;Title&lt;/title&gt;
  
      &lt;link rel=&quot;stylesheet&quot; href='{% static &quot;/Bootstrap/css/bootstrap.min.css&quot; %}'
            integrity=&quot;sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO&quot; crossorigin=&quot;anonymous&quot;&gt;
  
      &lt;style&gt;
          .navbar-custom{
              background-color: #e86813;
          }
      &lt;/style&gt;
  
      &lt;h3&gt;Hello World&lt;/h3&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      {% include 'StaticPages/navbar.html' %}
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>