CODEWITHSUNDEEP
pythondjangotwitter-bootstrap
DBE7
DBE7

Reputation: 816

Trouble using Bootstrap for Django 3

I am trying to implement Bootstrap and thought this library looked pretty neat. However, when I try to use one of the template tags, there is no styling, just a plain ol' HTML-form. Stuff I have already done:

Here is my template:

{% extends 'base.html' %}
{% load bootstrap3 %}
{% bootstrap_messages %}

{% block title %}
    Edit {{ thing.name }} - {{ block.super }}
{% endblock title %}

{% block content %}
    <h1>Edit "{{ thing.name }}"</h1>
    <form role="form" action="" method="post">
       {% csrf_token %}
       {% bootstrap_form form %}
       {% buttons %}
       <button type="submit">{% bootstrap_icon "star" %}Submit</button>
    </form>
       {% endbuttons %}

{% endblock content %}

And just for the record - settings.py:

INSTALLED_APPS = [
    'collection',
    'bootstrap3',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'django.contrib.sitemaps',
    'registration',

]

Any help is greatly appreciated!

Upvotes: 1

Views: 226

Answers (2)

DBE7
DBE7

Reputation: 816

I managed to solve my own problem. @JoshKelly's answer was part of the solution. I just loaded the CSS and Javascript inside of my {% block %} of content. Like this: 

{% extends 'base.html' %}

{% load bootstrap3 %}


{% block title %}
    Edit {{ thing.name }} - {{ block.super }}
{% endblock title %}

{% block content %}
{% bootstrap_css %}
{% bootstrap_javascript %}
    <h1>Edit "{{ thing.name }}"</h1>
    <form role="form" action="" method="post">
       {% csrf_token %}
       {% bootstrap_form form %}
       {% buttons %}
       <button type="submit">{% bootstrap_icon "star" %}Submit</button>
    </form>
       {% endbuttons %}

{% endblock content %}

As Josh mentioned, this does not look pretty, so I'll make sure to add this to my base.html.

Upvotes: 1

Josh Kelley
Josh Kelley

Reputation: 58422

If things are mostly working, but the styling is missing, it's likely because you're not pulling in the Bootstrap CSS. The django-bootstrap3's README omits this, but its quickstart example template has the necessary details.

{# Load the tag library #}
{% load bootstrap3 %}

{# Load CSS and JavaScript #}
{% bootstrap_css %}
{% bootstrap_javascript %}

{# Display django.contrib.messages as Bootstrap alerts #}
{% bootstrap_messages %}

{# Display a form #}
<form action="/url/to/submit/" method="post" class="form">
  {% csrf_token %}
  {% bootstrap_form form %}
  {% buttons %}
    <button type="submit" class="btn btn-primary">
      {% bootstrap_icon "star" %} Submit
    </button>
  {% endbuttons %}
</form>

(For a real site, of course, you'll probably want to add {% bootstrap_css %} and {% bootstrap_javascript %} to your base template.)

Upvotes: 3

Related Questions