Setting up Bootstrap in Django

Assume the following directory structure:

~/workspace/mysite/mysite
~/workspace/mysite/siteapp

Bootstrap files reside at either the project level (~/workspace/mysite/mysite/static/) or at the application level
(~/workspace/mysite/siteapp/static/). Static files at the project level can be accessed by all applications. Static files at
the application level can only be accessed by that particular application.


//////////////////////////////////////////////////////////////
For the Project level
1) Download Bootstrap
$ cd ~/workspace/mysite/mysite/static
$ wget https://github.com/twbs/bootstrap/releases/download/v3.3.6/bootstrap-3.3.6-dist.zip
$ unzip bootstrap-3.3.6-dist.zip
$ rm bootstrap-3.3.6-dist.zip

2) Edit settings.py
We need to edit settings.py to be able to find the new static files. Make sure settings.py contains the following code

INSTALLED_APPS = [
    'siteapp',
...
    'django.contrib.staticfiles',
]

...

STATIC_URL = '/static/'

...

# Additional locations of static files
STATICFILES_DIRS = (
    # Put strings here, like "/home/html/static" or "C:/www/django/static".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
    os.path.join(
        os.path.dirname(__file__),
        'static',
    ),
)

3) Now, when we make our first template, we can simply include the bootstrap.min.css file as following:

{% load staticfiles %}
<html>
  <head>
    <link href="{% static 'bootstrap-3.3.6-dist/css/bootstrap.min.css' %}" rel="stylesheet" media="screen">
  </head>
...

///////////////////////////////////////////////////////////////////////////
For the application level:
1) $ cd ~/workspace/mysite/siteapp/static/siteapp/

Install


2) Ensure the following code is present in settings.py

INSTALLED_APPS = [
    'siteapp',
...
    'django.contrib.staticfiles',
]

...

STATIC_URL = '/static/'

3) Include the following code in your templates:
{% load staticfiles %}
<link href="{% static 'bootstrap-3.3.6-dist/css/bootstrap.min.css' %}" rel="stylesheet" media="screen">

////////////////////////////////////////////////

Finally, we want to create a base.html template which all other templates will inherit from. That way if we make a change to
the bootstrap style-sheet, changes will be propagated to all other templates.
Add the following code to ~/workspace/mysite/siteapp/templates/base.html

{% load staticfiles %}
<html lang="en">
  <head>
    <link href="{% static 'bootstrap/css/bootstrap.min.css' %}"
          rel="stylesheet" media="screen">
    <meta charset="utf-8"/>
    <title>MySite</title>
  </head>

  <body>
    {% block content %}
    {% endblock %}

    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
  </body>
</html>