django crispy form does not work in the template

Question

I'm trying to make my form-fields to be in a row like this html code down below, but it does not work, I want all the fields in the PrimryForm class to be in a row not in a column:

Html code:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col">
            <div class="form-group">
                <input type="text" class="form-control">
            </div>
        </div>
        <div class="col">
            <div class="form-group">
                <input type="text" class="form-control">
            </div>
        </div>
        <div class="col">
            <div class="form-group">
                <input type="text" class="form-control">
            </div>
        </div>
    </div>
</div>

Forms.py file:

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Row, Column

class PrimaryForms(forms.ModelForm):
    signature_of_student = JSignatureField(
        widget=JSignatureWidget(
            jsignature_attrs={'color':'#e0b642', 'height':'200px'}
            )
            )
    signature_of_guardian = JSignatureField(
        widget=JSignatureWidget(
            jsignature_attrs={'color':'#e0b642', 'height':'200px'}
            )
            )
    date_of_birth = forms.DateField(widget=forms.DateInput(attrs={'type': 'date'}))
    class Meta:
        model = Primary
        fields = ['admission_number', 'profile_picture', 'first_name', 
        'last_name', 'gender', 'address_of_student', 'class_Of_student', 
        'comment_of_student', 
'year_of_graduation', 'date_of_birth', 'religion', 'mother_name', 'signature_of_student', 
'relationship', 'signature_of_guardian']
        def __init__(self, *args, **kwargs):
            super().__init__(*args, **kwargs)
            self.helper = FormHelper()
            self.helper.form_method = 'post'
            self.helper.form_class = 'form-horizontal'
            self.helper.label_class = 'col-md-3'
            self.helper.field_class = 'col-md-9'

My Form/template:

{% load crispy_forms_tags %}
    <div class="container">
        <div class="row justify-content-center">
            <div class="col">
                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    {% crispy form %}
                        <br>
                    <button type="submit" class="btn btn-primary">Create Student</button>
                </form>
            </div>
        </div>
    </div>

How can I do this using django-crispy-form?

Answer 1

I solve my problem using boostrap-5 ROW and COLUMN in the template

from this template:

        {% load crispy_forms_tags %}
        <div class="container">
            <div class="row justify-content-center">
                <div class="col">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        {% crispy form %}
                            <br>
                        <button type="submit" class="btn btn-primary">Create Student</button>
                    </form>
                </div>
            </div>
        </div>

To This:

{% load crispy_forms_tags %}
    <br>
    <form action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="container">
            <div class="form-group row">
    
                <div class="col">
                    {{form.admission_number|as_crispy_field}}
                </div>
                
                <div class="col">
                    {{form.profile_picture|as_crispy_field}}
                </div>
    
                <div class="col">
                    {{form.first_name|as_crispy_field}}
                </div>
    
                <div class="col">
                    {{form.last_name|as_crispy_field}}
                </div>
    
            </div>
<div class="tex-center">
                <button type="submit" class="btn btn-primary btn-lg">Create Student</button>
            </div>
        </div>
    </form>