title: Why bootstrap doesn't work although I have loaded it, etc. (Django project)?
body: <p>I'm working on this Django project. The functionality works perfectly fine. When I started working on the front-end using Bootstrap3, I ran into some issues (more like confusions). </p>
  
  <p>First, I installed django-bootstrap3 using command prompt like so:</p>
  
  <pre><code>pip install django-bootstrap3
  </code></pre>
  
  <p>The installation was successful. Bootstrap3 was downloaded into this location in my computer <em>c:\python34\lib\site-packages</em> Then, I included it as a third-party app in  <strong>settings.py</strong> in the list of <em>INSTALLED_APPS</em> in my main project directory like so:</p>
  
  <pre><code> INSTALLED_APPS =(
  --apps--
  'bootstrap3',
  )
  </code></pre>
  
  <p>Also in <strong>settings.py</strong>, I included jQuery like so:</p>
  
  <pre><code>BOOTSTRAP3 = {'include_jquery': True}
  </code></pre>
  
  <p>I modified my <em>base.html</em> to include the bootstrap elements. I have two apps, <em>users</em> and <em>mynotess</em> (sorry for bad naming)</p>
  
  <p><strong>base.html</strong></p>
  
  <p><strong>EDIT</strong>: base.html is at the bottom of question.</p>
  
  <p>For some reason, I loaded up <em>localhost:8000</em> and it was still in the normal ugly HTML form. I checked online, and I found some CDN links and thought maybe if I just used the CDN links, it would work.</p>
  
  <p>I then included this in <strong>base.html</strong>, copied right from Bootstrap's website.</p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>(I included the links in the <em>head</em> section and the scripts in the <em>body</em> section of the HTML document).</p>
  
  <p>It worked! <strong>However</strong>, when I <strong>removed the bootstrap3 from my INSTALLED_APPS</strong> and all the code that loads up bootstrap3 that was installed on my computer (such as <em>{% load bootstrap3 %}</em>, it didn't work. It went back to the ugly HTML format. Similarly, when I <strong>removed the CDN links</strong> and kept all the bootstrap3 code that loaded bootstrap installed on my computer, it went back to the ugly HTML format as well.</p>
  
  <p>My question is:</p>
  
  <ul>
  <li><p>Is it supposed to be like this? According to a book that I'm currently following for this project, I don't even have to include the CDN links and scripts (the book doesn't mention them <strong>at all</strong>) and it ought to work.</p></li>
  <li><p>If it's not supposed to be like this, is there something wrong with my code that's causing this? Am I missing some step? Are my bootstrap3 files in the correct directory? (i just downloaded it using pip through command prompt and I didn't move it anywhere else)</p></li>
  </ul>
  
  <p>The functionality of my Django website works just fine.
  Any help, explanations, or suggestions are greatly appreciated!</p>
  
  <p><strong>EDIT</strong>:
  <strong>base.html</strong> would have to be like this if I wanted the Bootstrap elements to show up.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  {% load bootstrap3 %}
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;&lt;!-- encoding characters --&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;&lt;!-- some Microsoft Edge/IE stuff --&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;&lt;!-- viewport -&gt; the user's visible area of a webpage, -&gt; this sets it to normal zoom (scale 1) and width of device --&gt;
          &lt;title&gt;My Notes&lt;/title
          {% bootstrap_css %}
          {% bootstrap_javascript %}
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;!-- Static top navbar --&gt;
          &lt;nav class="navbar navbar-default navbar-static-top"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
                      data target="#navbar" aria-expanded="false"
                      aria-controls="navbar"&gt;&lt;/button&gt;
                      &lt;a class="navbar-brand" href="{% url 'mynotess:index' %}"&gt;My Notes&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div id="navbar" class="navbar-collapse collapse"&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          {% if user.is_authenticated %}
                              &lt;li&gt;&lt;a href="{% url 'mynotess:topics' %}"&gt;My Topics&lt;/a&gt;&lt;/li&gt;
                          {% endif %}
                      &lt;/ul&gt;
                      &lt;ul class="nav navbar-nav navbar-right"&gt;
                          {% if user.is_authenticated %}
                              &lt;li&gt;&lt;a&gt;{{user.username}}&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="{% url 'users:logout' %}"&gt;Log Out&lt;/a&gt;&lt;/li&gt;
                          {% else %}
                              &lt;li&gt;&lt;a href = "{% url 'users:login' %}"&gt;Login&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href = "{% url 'users:register' %}"&gt;Create Account&lt;/a&gt;&lt;/li&gt;
                          {% endif %}
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
          &lt;div class="container"&gt;
              &lt;div class="page-header"&gt;
                  {% block header %}{% endblock header %}
              &lt;/div&gt;
              &lt;div&gt;
                  {% block content %}{% endblock content %}
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>If I removed just the CDN links, it wouldn't work. Similarly, if I removed just the template tags, it wouldn't work either.</p>
  
  <p><strong>base.html</strong> without template tags (doesn't work)</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;&lt;!-- encoding characters --&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;&lt;!-- some Microsoft Edge/IE stuff --&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;&lt;!-- viewport -&gt; the user's visible area of a webpage, -&gt; this sets it to normal zoom (scale 1) and width of device --&gt;
          &lt;title&gt;My Notes&lt;/title
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
          &lt;!-- Static top navbar --&gt;
          &lt;nav class="navbar navbar-default navbar-static-top"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
                      data target="#navbar" aria-expanded="false"
                      aria-controls="navbar"&gt;&lt;/button&gt;
                      &lt;a class="navbar-brand" href="{% url 'mynotess:index' %}"&gt;My Notes&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div id="navbar" class="navbar-collapse collapse"&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          {% if user.is_authenticated %}
                              &lt;li&gt;&lt;a href="{% url 'mynotess:topics' %}"&gt;My Topics&lt;/a&gt;&lt;/li&gt;
                          {% endif %}
                      &lt;/ul&gt;
                      &lt;ul class="nav navbar-nav navbar-right"&gt;
                          {% if user.is_authenticated %}
                              &lt;li&gt;&lt;a&gt;{{user.username}}&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="{% url 'users:logout' %}"&gt;Log Out&lt;/a&gt;&lt;/li&gt;
                          {% else %}
                              &lt;li&gt;&lt;a href = "{% url 'users:login' %}"&gt;Login&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href = "{% url 'users:register' %}"&gt;Create Account&lt;/a&gt;&lt;/li&gt;
                          {% endif %}
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
          &lt;div class="container"&gt;
              &lt;div class="page-header"&gt;
                  {% block header %}{% endblock header %}
              &lt;/div&gt;
              &lt;div&gt;
                  {% block content %}{% endblock content %}
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>base.html</strong> without the links for CDN (also doesn't work)
  </p>
  
  <pre><code>{% load bootstrap3 %}
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;&lt;!-- encoding characters --&gt;
          &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;&lt;!-- some Microsoft Edge/IE stuff --&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;&lt;!-- viewport -&gt; the user's visible area of a webpage, -&gt; this sets it to normal zoom (scale 1) and width of device --&gt;
          &lt;title&gt;My Notes&lt;/title
          {% bootstrap_css %}
          {% bootstrap_javascript %}
      &lt;/head&gt;
      &lt;body&gt;
          &lt;!-- Static top navbar --&gt;
          &lt;nav class="navbar navbar-default navbar-static-top"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="navbar-header"&gt;
                      &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
                      data target="#navbar" aria-expanded="false"
                      aria-controls="navbar"&gt;&lt;/button&gt;
                      &lt;a class="navbar-brand" href="{% url 'mynotess:index' %}"&gt;My Notes&lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div id="navbar" class="navbar-collapse collapse"&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          {% if user.is_authenticated %}
                              &lt;li&gt;&lt;a href="{% url 'mynotess:topics' %}"&gt;My Topics&lt;/a&gt;&lt;/li&gt;
                          {% endif %}
                      &lt;/ul&gt;
                      &lt;ul class="nav navbar-nav navbar-right"&gt;
                          {% if user.is_authenticated %}
                              &lt;li&gt;&lt;a&gt;{{user.username}}&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="{% url 'users:logout' %}"&gt;Log Out&lt;/a&gt;&lt;/li&gt;
                          {% else %}
                              &lt;li&gt;&lt;a href = "{% url 'users:login' %}"&gt;Login&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href = "{% url 'users:register' %}"&gt;Create Account&lt;/a&gt;&lt;/li&gt;
                          {% endif %}
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
          &lt;div class="container"&gt;
              &lt;div class="page-header"&gt;
                  {% block header %}{% endblock header %}
              &lt;/div&gt;
              &lt;div&gt;
                  {% block content %}{% endblock content %}
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>