Using Crispy forms in my Django project and the input field appears to be too small

Question

When I see other examples people can make the entire field screen-wide. Like this:

However what appears on my screen is too small:

How can I fix it? For reference, I'm using Bootstrap v4.5.3

Code: models.py

from django.db import models
from django.utils import timezone
from django.core.validators import FileExtensionValidator

# Create your models here.
class Video(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    video_file = models.FileField(upload_to='uploads/video_files',
                                  validators = [FileExtensionValidator(allowed_extensions=['mp4', 'mkv'])])
    thumbnail = models.FileField(upload_to='uploads/thumbnails',
                                 validators = [FileExtensionValidator(allowed_extensions=['png', 'jpeg', 'jpg'])])
    date_posted = models.DateTimeField(default=timezone.now)

create_videos.html

{% extends 'videos/base.html' %}
{% load crispy_forms_tags %}

{% block content %}
<div class="container mb-5">
    <div class="row justify-content-center">
        <div class="col-md-6 col-sm-12 col-xs-12">
            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <legend class="border-bottom mb-4">Upload video</legend>
                {{ form | crispy }}
                <div class="col-md-4 ml-auto">
                    <button class="btn btn-outline-primary btn-block mt-3">Upload</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock content %}

I have tried:

• Messing with the 3rd to change col-md size.
• Editing individual fields (mainly 'title' and 'description') with {{ form.field | as_crispy_field }}.

Answer 1

Based on the styling of your form, I would say that the bootstrap 4 template pack for django-crispy-forms is not being correctly applied. According the crispy forms documentation, you must install the template pack and add it to your settings.

Make sure that you have crispy-bootstrap4 installed.

pip install crispy-bootstrap4

Your settings.py should have this:

    INSTALLED_APPS = (
    ...
    "crispy_forms",
    "crispy_bootstrap4",
    ...
)

CRISPY_ALLOWED_TEMPLATE_PACKS = "bootstrap4"

CRISPY_TEMPLATE_PACK = "bootstrap4"

Links: https://pypi.org/project/crispy-bootstrap4/