Django form-fields: Styling for Bootstrap without losing functionality?

Question

So form.as_p in django gives a plain, yet very catered form, with field inputs matching the entity attribute type, like so:

Notice how vintage is a dropdown item, and so is brand. But then again, it's very plain.

I want to use bootstrap styling with the django form without losing the way django customizes each input type by the model attributes.

I have managed to achieve this:

By doing this in my .pug template:

                form(method="post" action=".")
                    | {% csrf_token %}
                    for field in da_form
                        div(class="form-group row")
                            label(class="col-lg-4 col-md-3 cold-sm-6 col-form-label") {{field.label_tag}}
                            div(class="col-lg-8 col-md-3 cold-sm-6")
                                input(class="form-control") {{field}}
                    input(class="form-control")(type="submit" value="submit")

But how can I both get the style, and the catered form inputs from django? In my current form all fields are simple input types.

your question is not clear. you want to use bootstrap in your form? or something else you are trying to achieve — Exprator
@Exprator: Sorry, I've added another sentence. Basically this is what I want: Style django's forms with bootstrap (so adding form-control to class, etc...) but without losing the custom input type for fields (notice how vintage is a dropdown item, and so is brand) — zerohedge
what is this pug template? why are you not using the normal html and easily you can do it — Exprator
@Exprator pug is formerly known as jade, and it's a faster way to write HTML. If you can show me how to do it in HTML, I can write it in pug. — zerohedge
ok then i am giving the django template language change it to pug and tell if it works — Exprator

Exprator Exprator · Accepted Answer · 2017-05-20T08:25:17

<form action="" method="POST">
{% for fields in form.visible_fields %}
<div label={{ fields.label_tag }} class="bootstrap class" id="your need">
<div class="your need">{{ fields }} </div>
{% endfor %}
<input type="submit" value="Submit">
</div>
</form>

Django form-fields: Styling for Bootstrap without losing functionality?

1 Answers