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.
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.