Django and Bootstrap: offline reload page issue (netdna.bootstrapcdn.com)

Question

I have a Django Project that works. I have "bootstrapped" it a bit using in my base_html:

{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
{# Display django.contrib.messages as Bootstrap alerts #}
{% bootstrap_messages %} 

in settings.py:

INSTALLED_APPS = (
    'bootstrap_toolkit',
    'bootstrap3',
    'django_admin_bootstrapped.bootstrap3',
    'django_admin_bootstrapped',             
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'jquery',
    'jquery_ui',
    'homepage',
    'simpleapp',
)

Perfect, if I surf between pages using my buttons&co. it appears bootstrapped and all is ok!

BUT...

I noticed that if my pc is offline, (only) when I reload the page (or I use in some js parent.window.location.reload(true);), it appears not bootstrapped! Moreover I noticed that when I'm online and I reload the page, the browser searches for netdna.bootstrapcdn.com... but this is not my goal: I have to create a project that works offline.

How can I resolve the reload problem?

Answer 1

The default settings of django-bootstrap3 point to CDNs as documented:

# Default settings
BOOTSTRAP3 = {

    # The URL to the jQuery JavaScript file
    'jquery_url': '//code.jquery.com/jquery.min.js',

    # The Bootstrap base URL
    'base_url': '//netdna.bootstrapcdn.com/bootstrap/3.3.1/',
    ...

You should store the related files in your static directory and set the jquery_url and base_url settings of bootstrap3. For example:

BOOTSTRAP3 = {

    # The URL to the jQuery JavaScript file
    'jquery_url': '/static/js/jquery.min.js',

    # The Bootstrap base URL
    'base_url': '/static/css/',

    # The complete URL to the Bootstrap CSS file (None means derive it from base_url)
    'css_url': '/static/css/bootstrap.min.css',

    # The complete URL to the Bootstrap CSS file (None means no theme)
    'theme_url': '/static/css/bootstrap.theme.min.css',

    # The complete URL to the Bootstrap JavaScript file (None means derive it from base_url)
    'javascript_url': '/static/js/bootstrap.min.js',

An alternative way would be to hard-code the css and js locations into your templates, like:

<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" type="text/css"/>
<link href="{% static 'css/bootstrap.theme.min.css' %}" rel="stylesheet" type="text/css"/>
<script src="{% static 'js/bootstrap.min.js' %}"></script>