title: How can I style django forms with bootstrap CSS?
body: <p>I've written a form class in django, and while trying to output it, found that it is not beautiful to look at.</p>
  
  <pre><code>class AddAppointmentForm(forms.Form):
      docchoices = []
      for doc in doctor.objects.all():
          docst = [doc.docid, doc.name]
          docchoices.append(docst)
      # CHOICES = [('select1', 'select 1'),
      #            ('select2', 'select 2')]
      name = forms.CharField(label='Name', max_length=100)
      gender = forms.ChoiceField(
          required=True,
          widget=forms.RadioSelect,
          choices=[('male', 'Male'), ('female', 'Female')]
      )
      age = forms.IntegerField(max_value=100,min_value=1, required=True)
      phone = forms.CharField(label='Phone', max_length=14, required=True)
      email = forms.CharField(label='Email', max_length=25, required=False)
      address = forms.CharField(label='Address', max_length=60, required=False)
      city = forms.CharField(label='City', max_length=20, required=False)
      doctors = forms.ChoiceField(
          required=True,
          widget=forms.Select,
          choices=docchoices,
      )
  
  {# Load the tag library #} {% extends "appointments/base.html" %} {% block title %}Create appointment{% endblock %} {% block content %}
  &lt;div class="container"&gt;
      &lt;form class="needs-validation" novalidate="" action="/appointments/appointmentcreated" method="post"&gt;
          {% csrf_token %}
          &lt;div class="row"&gt;
              &lt;div class="col-md-12 mb-6"&gt;
                  &lt;label for="Name"&gt;Name&lt;/label&gt; {{ form.name }}
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row py-2 "&gt;
              &lt;div class="input-group col-md-6 mb-3"&gt;
                  &lt;span class="input-group-addon"&gt;Age&lt;/span&gt; {{ form.age }}
              &lt;/div&gt;
              &lt;div class="input-group col-md-6 mb-3"&gt;
                  &lt;span class="input-group-addon"&gt;Gender&lt;/span&gt; {{ form.gender }}
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row py-2 "&gt;
              &lt;div class="mb-3"&gt;
                  &lt;label for="email"&gt;Phone
                  &lt;span class="text-muted"&gt;(Required)&lt;/span&gt;
              &lt;/label&gt; {{ form.phone }}
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row py-2 "&gt;
              &lt;div class="mb-3"&gt;
                  &lt;label for="email"&gt;Email
                  &lt;span class="text-muted"&gt;(Optional)&lt;/span&gt;
  &lt;/label&gt; {{ form.email }}
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="mb-3"&gt;
              &lt;label for="address"&gt;Address&lt;/label&gt; {{ form.address }}
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-md-12 mb-6"&gt;
                  &lt;label for="city"&gt;City&lt;/label&gt; {{ form.city }}
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12 mb-6"&gt;
                  &lt;label for="sel_doctor"&gt;Select Doctor&lt;/label&gt; {{ form.doctors }}
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="col-md-2 mb-1"&gt;
                  &lt;button class="btn btn-primary btn-block" type="submit"&gt;Create appointment&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  {% endblock %}
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/fWj1x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fWj1x.png" alt="Without bootstrap"></a></p>
  
  <p>I attempted to style it as per the suggestions <a href="https://simpleisbetterthancomplex.com/article/2017/08/19/how-to-render-django-form-manually.html" rel="nofollow noreferrer">here</a>. But the option attrs arent being accepted for Charfield.</p>
  
  <pre><code>name = forms.CharField(label='Name', max_length=100, attrs={
                         'class': 'form-control'})
  
  
  File "/home/joel/myappointments/appointments/forms.py", line 7, in &lt;module&gt;
      class AddAppointmentForm(forms.Form):
  File "/home/joel/myappointments/appointments/forms.py", line 15, in AddAppointmentForm
      'class': 'form-control'})
  File "/home/joel/.local/lib/python3.6/site-packages/django/forms/fields.py", line 214, in __init__
      super().__init__(**kwargs)
  TypeError: __init__() got an unexpected keyword argument 'attrs'
  </code></pre>
  
  <p>What is the proper way to use a css framework like bootstrap with django forms?</p>