How to put my form in line orientation (horizontal). django forms

I want to put my form in horizontal.I tried to do this, but it got unformatted and disorganized

MY HTML:

<div class="tab-pane fade container-fluid p-2" id="profile" role="tabpanel"
                    aria-labelledby="profile-tab">
                    <h6 class="m-0 font-weight-bold text-primary">Horas Adicionais</h6>
                    <div class="row mt-4">
                        <div class="col">
                            {{ form_funcionarioadicional.management_form }}

                            {% for fa in form_funcionarioadicional %}
                                <div class="faform row">
                                    <div class="col">
                                        {{fa}}
                                    </div>
                                </div>
                            
                            {% endfor %}
                        </div>
                    </div>
                </div>

currently it is like this, I wanted to leave it horizontal currently it is like this, I wanted to leave it horizontal

How can I fix this in html, or in forms.py?

You can iterate form like this with col class of Bootstrap...

views.py

def Demoview(request):
    form = DemoForm() 
    context = {'form':form}
    return render(request,'index.html',context)

form.py

class DemoForm(forms.ModelForm):
    class Meta:
        model = DemoClass
        fields = "__all__"
        widgets = {
            'field1':forms.TextInput(attrs={'class':'form-control','placeholder':'Field1'}),
            'field2':forms.NumberInput(attrs={'class':'form-control','placeholder':'Field2'}),
            'field3':forms.EmailInput(attrs={'class':'form-control','placeholder':'Field3'}),
            'field4':forms.TextInput(attrs={'class':'form-control','placeholder':'Field4'}),
        }

HTML Code

{% block body %}
     <div class="container-fluid">
        <div class="row">
            {% for fm in form %}
            <div class="col-6">
                <label >{{fm.label}}</label>
                {{fm}}
            </div>
            {% endfor %}
        </div>
     </div>
{% endblock body %}

Output

enter image description here

Back to Top