# Why django forms shows input in row instead of a column
**URL:** https://forum.djangoproject.com/t/why-django-forms-shows-input-in-row-instead-of-a-column/18493
**Category:** Forms & APIs
**Created:** [January 28, 2023, 2:32pm UTC](https://forum.djangoproject.com/t/why-django-forms-shows-input-in-row-instead-of-a-column/18493 "2023-01-28T14:32:06Z")
**Posts on this page:** 17
**Page:** 1
### Author:  [@Adamu-Abdulkarim-Dee](https://forum.djangoproject.com/u/Adamu-Abdulkarim-Dee)
#### Post date: [January 28, 2023, 2:32pm UTC](https://forum.djangoproject.com/t/why-django-forms-shows-input-in-row-instead-of-a-column/18493/1 "2023-01-28T14:32:06Z")
0
I wonder why django `modelForm` shows `input` in a row instead of a column like this:
[](https://i.stack.imgur.com/qC9Wr.png)
I like all input in my `model` to be in a column when putting `{{ form|crispy}}` in the `template`, as you can see in the `template`, even if add `col-md-3` to resize the `input` in a `col` it does not work, I think there is something I need to know about `django-forms`.
template:
```auto
--- Bootstrap-5
```
The Result:
[](https://i.stack.imgur.com/L9HMT.png)
My Forms.py file:
```auto
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]
```
---
### Author:  [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)
#### Post date: [January 28, 2023, 2:36pm UTC](https://forum.djangoproject.com/t/why-django-forms-shows-input-in-row-instead-of-a-column/18493/2 "2023-01-28T14:36:01Z")
This isn’t about django forms, it’s about using crispy.
- Instead of using the crispy filter, use the [crispy tag](https://django-crispy-forms.readthedocs.io/en/latest/crispy_tag_forms.html).
- Read up on [crispy layouts](https://django-crispy-forms.readthedocs.io/en/latest/layouts.html).
And to be clear, these are items in a row:
```auto
field 1 field 2 field 3 field 4
```
These are items in a column:
```auto
field 1
field 2
field 3
field 4
```
---
### Author:  [@Adamu-Abdulkarim-Dee](https://forum.djangoproject.com/u/Adamu-Abdulkarim-Dee)
#### Post date: [January 28, 2023, 5:27pm UTC](https://forum.djangoproject.com/t/why-django-forms-shows-input-in-row-instead-of-a-column/18493/3 "2023-01-28T17:27:31Z")
Thanks for enlightened me about that. Will you please go through the documentation, i found it harder to understand an use in the `forms.py` and template. This is my first time working with `Crispy Layout`.
Thanks.
---
### Author:  [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)
#### Post date: [January 28, 2023, 8:22pm UTC](https://forum.djangoproject.com/t/why-django-forms-shows-input-in-row-instead-of-a-column/18493/4 "2023-01-28T20:22:55Z")
What I suggest you do is try working with it by following the docs with a minimal example. Try creating form with only three or four fields and play with the helpers and layout objects.
Also, you might do a web search for blogs that have posted articles about Crispy forms - there’s a lot of stuff out there.
When you do have some code but are still having problems that you can’t resolve, feel free to post _that_ code here and we can help you debug it.
---
### Author:  [@Adamu-Abdulkarim-Dee](https://forum.djangoproject.com/u/Adamu-Abdulkarim-Dee)
#### Post date: [January 28, 2023, 8:57pm UTC](https://forum.djangoproject.com/t/why-django-forms-shows-input-in-row-instead-of-a-column/18493/5 "2023-01-28T20:57:51Z")
I did what you have said Ken. But at this time, the question was on stack overflow: [Here](https://stackoverflow.com/questions/75270782/django-crispy-form-does-not-work-in-the-template)
---
### Author:  [@Adamu-Abdulkarim-Dee](https://forum.djangoproject.com/u/Adamu-Abdulkarim-Dee)
#### Post date: [January 29, 2023, 11:57am UTC](https://forum.djangoproject.com/t/why-django-forms-shows-input-in-row-instead-of-a-column/18493/6 "2023-01-29T11:57:51Z")
I solve my problem using `django-crispy-layout` `ROW` and `COLUMN` in the `forms.py` file:
```auto
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'
self.helper.layout = Layout(
Row(
Column('admission_number', css_class='form-group col'),
Column('profile_picture', css_class='form-group col'),
Column('first_name', css_class='form-group col'),
Column('last_name', css_class='form-group col'),
Column('gender', css_class='form-group col'),
Column('mother_name', css_class='form-group col'),
Column('signature_of_student', css_class='form-group col'),
)
)
```
I also change this form from:
```auto
{% load crispy_forms_tags %}
```
To This:
```auto
{% load crispy_forms_tags %}
```
---
### Author:  [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)
#### Post date: [January 29, 2023, 12:03pm UTC](https://forum.djangoproject.com/t/why-django-forms-shows-input-in-row-instead-of-a-column/18493/7 "2023-01-29T12:03:53Z")
The changes to your template cause the Crispy formatting you put in your form to be ignored. You’re not using your helper.
You _either_ want to use the Crispy helper to define your layout, _or_ manually render the fields - but not both.
---
### Author:  [@Adamu-Abdulkarim-Dee](https://forum.djangoproject.com/u/Adamu-Abdulkarim-Dee)
#### Post date: [January 29, 2023, 12:16pm UTC](https://forum.djangoproject.com/t/why-django-forms-shows-input-in-row-instead-of-a-column/18493/8 "2023-01-29T12:16:05Z")
So, what is the problems of using that method? Can you correct it?
---
### Author:  [@Adamu-Abdulkarim-Dee](https://forum.djangoproject.com/u/Adamu-Abdulkarim-Dee)
#### Post date: [January 29, 2023, 12:25pm UTC](https://forum.djangoproject.com/t/why-django-forms-shows-input-in-row-instead-of-a-column/18493/9 "2023-01-29T12:25:08Z")
I do what you have said: I followed the tutorial by searching it on google.
Since this is the first time working with a `crispy-form-layout` and `crispy-helper`. Help me by correcting it, so that it would not cause bugs in the future.
---
### Author:  [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)
#### Post date: [January 29, 2023, 12:38pm UTC](https://forum.djangoproject.com/t/why-django-forms-shows-input-in-row-instead-of-a-column/18493/10 "2023-01-29T12:38:20Z")
The problem is that you made those changes to _both_ your form _and_ your template.
You only needed to make one of those changes, not both.
If you’re _really_ going to use Crispy, you want to go back to the earlier template. (The one in your last post where you’re using `{% crispy form %}`, not the original one where you were using the filter.)
If you only want to use the filter and that newest template, then you can remove the helper and layout code because it’s not being used. (It’s not that it’s “wrong”, you’re just not using it.)
---
### Author:  [@Adamu-Abdulkarim-Dee](https://forum.djangoproject.com/u/Adamu-Abdulkarim-Dee)
#### Post date: [January 29, 2023, 1:27pm UTC](https://forum.djangoproject.com/t/why-django-forms-shows-input-in-row-instead-of-a-column/18493/11 "2023-01-29T13:27:32Z")
It’s difficult to determine what specifically is considered “completely wrong” without any additional context, The form is being displayed in a template using Django’s template language.
Even using: `{% crispy form %}` in the template, the input does not do work. It does not shows all input in a row, and it also does not shows the input in the template.
---
### Author:  [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)
#### Post date: [January 29, 2023, 1:31pm UTC](https://forum.djangoproject.com/t/why-django-forms-shows-input-in-row-instead-of-a-column/18493/12 "2023-01-29T13:31:23Z")
> [@Adamu-Abdulkarim-Dee](#):
>
> Even using: `{% crispy form %}` in the template, the input does not do work. It does not shows all input in a row, and it also does not shows the input in the template.
You have:
> [@Adamu-Abdulkarim-Dee](#):
>
> `self.helper.field_class = 'col-md-9'`
How many bootstrap columns defined as `col-md-9` can you fit on one row?
You’re going to need to do some experimenting with this to see what’s going to work for you.
In general, you’re on the right track, but it’s not practical for us to try and match up the exact results you might be looking for from the code that can be posted here.
Again, I’m going to suggest that you simplify the situation a bit until you get used to working with these layout elements. Start with maybe 3 or 4 fields, and try different options to see what happens.
---
### Author:  [@Adamu-Abdulkarim-Dee](https://forum.djangoproject.com/u/Adamu-Abdulkarim-Dee)
#### Post date: [January 29, 2023, 1:55pm UTC](https://forum.djangoproject.com/t/why-django-forms-shows-input-in-row-instead-of-a-column/18493/13 "2023-01-29T13:55:00Z")
**Ken Whitesell** :
` How many bootstrap columns defined as`col-md-9`can you fit on one row?`
**Answer** \*:
One row can fit 12 / 9 = 1.33 col-md-9 bootstrap columns.
---
### Author:  [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)
#### Post date: [January 29, 2023, 1:57pm UTC](https://forum.djangoproject.com/t/why-django-forms-shows-input-in-row-instead-of-a-column/18493/14 "2023-01-29T13:57:16Z")
Yea, except that bootstrap doesn’t allow columns to be split.
In other words, the way you have these defined, you can only fit one field on each row which is why they’re all getting lined up in a single column.
---
### Author:  [@Adamu-Abdulkarim-Dee](https://forum.djangoproject.com/u/Adamu-Abdulkarim-Dee)
#### Post date: [January 29, 2023, 2:03pm UTC](https://forum.djangoproject.com/t/why-django-forms-shows-input-in-row-instead-of-a-column/18493/15 "2023-01-29T14:03:44Z")
**Ken** :
that bootstrap doesn’t allow columns to be split.
**answer** :
Bootstrap’s grid system uses a fixed width and equal-width columns to ensure consistency across devices and screen sizes. Splitting columns would violate this principle and disrupt the design’s intended layout.
I don’t care because the website does not
designed for mobile friendly.
---
### Author:  [@KenWhitesell](https://forum.djangoproject.com/u/KenWhitesell)
#### Post date: [January 29, 2023, 2:07pm UTC](https://forum.djangoproject.com/t/why-django-forms-shows-input-in-row-instead-of-a-column/18493/16 "2023-01-29T14:07:55Z")
It doesn’t matter what you care about.
You’re using bootstrap’s grid system. It’s going to format it the way _it_ wants.
---
### Author:  [@Adamu-Abdulkarim-Dee](https://forum.djangoproject.com/u/Adamu-Abdulkarim-Dee)
#### Post date: [January 29, 2023, 2:20pm UTC](https://forum.djangoproject.com/t/why-django-forms-shows-input-in-row-instead-of-a-column/18493/17 "2023-01-29T14:20:19Z")
As long as it [works](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLcwcZdL0VlVrIlSaNxsFLt5X1ZQ1am6dFJA&usqp=CAU).
I will use it later.
Thanks for Your Help sir.