Django-Bootstrap4 Javascript, Jquery, CSS not working properly

Question

I'm trying to use the django-boostrap4 in my project, so I did the following:

My home_base.html

{% load static %}
{% load bootstrap4 %}

<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
  <head>
    {% block head %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    {% bootstrap_css %}
    <title>Avaliei - Inteligência Imobiliária</title>
    {% endblock %}
  </head>
  <body>
    {% block body %}
      Body Content
    {% endblock %}

    {% bootstrap_jquery %}
    {% bootstrap_javascript %}
  </body>
</html>

My index.html:

{% extends "home_base.html" %}
{% load static %}

{% block body %}
  <div class="body_wrapper">
    <div id="preloader">
        <div id="ctn-preloader" class="ctn-preloader">
            <div class="animation-preloader">
                <div class="spinner"></div>
                <div class="txt-loading">
                    <span data-text-preloader="A" class="letters-loading">
                        A
                    </span>
                    <span data-text-preloader="V" class="letters-loading">
                        V
                    </span>
                    <span data-text-preloader="A" class="letters-loading">
                        A
                    </span>
                    <span data-text-preloader="L" class="letters-loading">
                        L
                    </span>
                    <span data-text-preloader="I" class="letters-loading">
                        I
                    </span>
                    <span data-text-preloader="E" class="letters-loading">
                        E
                    </span>
                    <span data-text-preloader="I" class="letters-loading">
                        I
                    </span>
                </div>
                <p class="text-center">Carregando</p>
            </div>
            <div class="loader">
                <div class="row">
                    <div class="col-3 loader-section section-left"><div class="bg"></div></div>
                    <div class="col-3 loader-section section-left"><div class="bg"></div></div>
                    <div class="col-3 loader-section section-right"><div class="bg"></div></div>
                    <div class="col-3 loader-section section-right"><div class="bg"></div></div>
                </div>
            </div>
        </div>
    </div>
  </div>
{% endblock %}

My settings.py:

INSTALLED_APPS = [
    ...,
    'bootstrap4', # Django Bootstrap 4
    ...
]

But when I runserver, my page is blank with no style at all, either animation from preloader. Despite that, when add a component like a button 'btn-danger', it works fine! At least it's showing the right style.

Am I missing some basic setting for this to work properly? I've tried add the CDN links directly in the index.html, but the behavior is the same.

Steven Floyd · Accepted Answer · 2019-10-10 05:13:36Z

4

I had the same problem and it was very frustrating, and even more so when I learned how simple it was! If you check the documentation for the library you will see what you need to do.

Add:

{% bootstrap_css %}
{% bootstrap_javascript jquery='full' %}

Into your heading or body for before any other script/links that may use or extend the bootstrap definitions.

Documentation: https://django-bootstrap4.readthedocs.io/en/latest/quickstart.html

I hope that works for you.

answered Oct 10, 2019 at 5:13

Steven Floyd

3531 gold badge3 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Django-Bootstrap4 Javascript, Jquery, CSS not working properly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related