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

by

4👍

✅

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>
👤Selcuk

0👍

If you don’t have cache enabled on your browser, it will not store the CSS and JS downloaded from the CDN. To avoid this, either

  1. Enable caching in your browser
  2. Download the minified bootstrap css and js and place them in your project’s static directory. Then link to them like <script src="{% static "bootstrap.min.js" %}"></script>. If you go this route, don’t forget to publish your static files.
👤C.B.

Leave a comment