Django / Bootstrap forms - Input size

I'm learning Django together with Bootstrap (5.1.3), and I'd like to keep my code as simple as possible for future updates. That's why I went for generic views in Django (Create/Detail/Edit...). That works great, all the features work seamlessly now.

What I'm struggling with is the layout of my Edit / Create forms. I can't find a way to increase the size of the input boxes.

I have the following code, for my Model:

    class customer(models.Model):
        created_date = models.DateTimeField(auto_now_add = True, editable = False, verbose_name = u"Créé le")
        modified_date = models.DateTimeField(auto_now = True, editable = False, verbose_name = u"Modifié le")
        
        fk_referrer = models.ForeignKey('customer', on_delete=models.CASCADE, verbose_name='Parrain', blank = True, null=True)
        surname = models.CharField('Prénom', max_length=200)
        lastname = models.CharField('Nom', max_length=200)
        phonenumber = PhoneNumberField('Téléphone', blank = True, null = True)
        email = models.EmailField('Email',max_length=100, blank = True, null = True)
        fk_interest = models.ManyToManyField(interests, verbose_name='Interêts', blank=True)
        comments = models.TextField('Commentaires', max_length=2000, blank=True, null = True)
    
        def __str__(self):
            return (self.surname   " "   self.lastname)

I did create a generic view:

    class CustomerEditView(UpdateView):
        model = customer
        fields = "__all__"
        template_name = 'client/edition.html'
        success_url = '/client/'

And have added the form in edition.html template:

<form method="POST" enctype="multipart/form-data">
 
    <!-- Security token -->
    {% csrf_token %}
 
    <!-- Using the formset -->
<table>
    {{ form.as_table }}
</table>     
    <input type="submit" value="{% if object %}Mettre à jour{% else %}Créer{% endif %}">
</form>

Here's what the output looks like:

Form layout

The text input fields are not large enough. I would like to at least fill the table (shown with a border) I think I should be able to sort it out using Forms, and redefining all my views to make them more specific (not generic). But is there a way to update the view / bootstrap styles so the width of the input fields would use all the space available ? Maybe using a Form on top of a generic view ?

Thanks a lot for any help.

CodePudding user response：

If i understand you correctly, this is a CSS thing. Wouldn't a quick fix be to just set width:100% on al the inputs?