How to Style a Django Form - Bootstrap

How can I add bootstrap styles to my django form?

To add bootstrap styling to your form, you're going to need to paste this code somewhere between your tags for the CSS;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

And this for the JavaScript;

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

This will apply some styling to your form.

Once you've done this, you'll have to use the classes that are specified on the BootStrap documentation that you can find here if you want to change the styling: https://getbootstrap.com/docs/4.1/components/forms/

This should give you the styling that you want although you may want to add a bit of your own additionally to get exactly what you're after.

How to style a Django editable form in bootstrap

Because of initials I need to do:

<input type="text" name="username" class="form-control" value="{{update_profile_form.initial.username}}">

Django Forms and Bootstrap - CSS classes and divs

I like to use "django-crispy-forms" which is the successor to django-uni-form. It's a great little API and has great support for Bootstrap.

I tend to use the template filters for quickly porting old code and quick forms, and the template tags when I need more control over the rendering.

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

<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>

---

Related Topics