title: CSS for Flask wtforms
body: <p>I have a the following code for a Form that I have in my Flask application using Wtforms. I use FieldList to use two fields for one part. </p>
  
  <pre><code>class A(Form)
          additional = FieldList(FormField(Additional), 'Additional', min_entries=1)
          submit = SubmitField('Submit')
  
  class Additional(Form):
          choices = [('Funding Mechanism', 'Funding Mechanism'), ('Study Section Name', 'Study Section Name')]
          critera = SelectField('Additional Criteria', choices=choices)
          input = StringField()
  </code></pre>
  
  <p>The template uses wtf.quick_form:</p>
  
  <pre><code>{% extends "base.html" %}
  {% import "bootstrap/wtf.html" as wtf %}
  
  {% block title %}Grants - Find Grant{% endblock %}
  
  {% block page_content %}
  &lt;div class="page-header"&gt;
      &lt;h1&gt;Specify&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="col-md-4"&gt;
      {{ wtf.quick_form(form) }}
  &lt;/div&gt;
  {% endblock %}
  </code></pre>
  
  <p>Currently the forms render in a squished and overlapping way like so: <a href="https://i.stack.imgur.com/qdubZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qdubZ.png" alt="enter image description here"></a></p>
  
  <p>How can I change the code so that it is formated in one line like below? It is a screenshot of @Niklas in Stockholm 's <a href="https://stackoverflow.com/questions/8463209/how-to-make-a-field-conditionally-optional-in-wtforms">form from his question</a>. </p>
  
  <p>Thank you! 
  <a href="https://i.stack.imgur.com/xqizo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xqizo.png" alt="enter image description here"></a></p>