How to apply Bootstrap 4 styles for 'Choose File' input to a Django form?

Question

I am displaying a form that involves uploading an image in my Django template.

This is the template:

{% extends 'header.html' %}

{% block content %}
<br>
<div class="w-50 card mx-auto">
    <div class="card-body text-center">
        <h2 class="card-title">New Post</h2>
        <form method="post">
            {% csrf_token %}
            <p><strong>
                Title<br>
                {{ form.Title }}
            </strong></p>
            <p><strong>
                Description<br>
                {{ form.Description }}
            </strong></p>
            <p><strong>
                Image 
                {{ form.Image }}
            </strong></p>
            <p><strong>
                Election<br>
                {{ election_form.PostElection }}
            </strong></p>
            <button type="submit" class='button btn btn-outline-dark'>Post</button>
        </form>
    </div>
</div>

{% endblock %}

As you can see, the submit button on the form has some Bootstrap attached. This makes it look different to the Choose File button on the image upload form. How do I apply the Bootstrap applied to the submit button to the button in the form?

Answer 1

To apply Bootstrap 4 styles to your "Choose File" input, you need to modify your Django code to produce the following HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="custom-file">
    <input type="file" class="custom-file-input" id="customFile" name="myImage">
    <label class="custom-file-label" for="customFile">Choose image file...</label>
</div>

That will produce a file picker that occupies the full width of your card.

If you need to validate the input, you'd need the following HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="custom-file">
    <input type="file" name="myImage" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose image file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
</div>

For more information you can check out this page here:

https://getbootstrap.com/docs/4.0/components/forms/#file-browser

Info on validation is available here:

https://getbootstrap.com/docs/4.0/components/forms/#validation

Answer 2

After crawling the interwebs, I found the link below but first here's the skinny:

Implementing bootstrap4 style on a choose file button while using a modelForm

***forms.py***
class ProfileForm(forms.ModelForm):
class Meta:
    model = Profile
    fields = ('avatar',)
    widgets = {'avatar':forms.FileInput(
        attrs={'style':'display: none;','class':'form-control', 'required': False, } 
         )}


****update_form.html****
**call each feil individualy**
<label class="btn btn-outline-secondary btn-lg">
    *button text goes here*
  {{profile_form.avatar}}
</label>

The main point is to use a span with a bootstrap class in HTML. Then nest your form.field inside while passing in 'style' attributes (CSS)'display: none;'

https://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3