django_bootstrap5 not formatting anything-CodePudding

I'm trying to get basic bootstrap formatting working in a django app, and installed django_bootstrap5 to do so. No formatting, however, is getting applied to any of the pages.

Here's the various pages:

base.html:

<!DOCTYPE html>
{% load django_bootstrap5 %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>
        {% block title %}
        {% endblock %}
    </title>
</head>
<body>
<div >
    {% block body %}
    {% endblock %}
</div>
</body>
</html>

I extend this in a simple index page:

<!DOCTYPE html>
{% extends 'base.html' %}
{% load django_bootstrap5 %}

{% block title %}
  Home
{% endblock %}

{% block body %}
<h1>Hello World</h1>
{% endblock %}

Hello World, however, is not showing up in a container.

This is also failing on a form page:

<!DOCTYPE html>
{% extends 'base.html' %}
{% load django_bootstrap5 %}

{% block body %}
<div >
    <h1>Sign Up</h1>
    <form method="POST">
        {% csrf_token %}
        {% bootstrap_form form %}
        <input type="submit" value="Sign Up" >
    </form>
</div>
{% endblock %}

The form is neither in a bootstrap container, nor does it have any styling at all. What am I missing here? Thank you.

CodePudding user response：

It looks like you've correctly loaded the django_bootstrap5 template tag library in both your base template and your child templates. However, it seems that you're missing the Bootstrap CSS and JavaScript files that provide the actual styling and functionality.

Make sure you have the Bootstrap CSS and JavaScript files included in your HTML, either by linking to a CDN or by including them in your static files. You can also include them in your base.html template, so you don't have to include them on every page.

It should look something like this in your base.html:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV rV" crossorigin="anonymous"></script>

You also need to make sure that you're including the bootstrap_form template tag in the correct place. You have it inside the tag, but it should be outside of it, like this:

<form method="POST">
    {% csrf_token %}
    {% bootstrap_form form %}
    <input type="submit" value="Sign Up" >
</form>