title: How to incorporate a flask_wtf form into a Bootstrap form?
body: <p>I am trying to create a simple sign-in/out website, but I don't know how to use Bootstrap with Flask effectively. I have only just started using Bootstrap, so I am new to how it works exactly, and web development in general.</p>
  <p>Below is the <code>flask_wtf</code> form I am using:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;h1&gt;Sign In&lt;/h1&gt;
  &lt;form action=&quot;&quot; method=&quot;post&quot; novalidate&gt;
      {{ form.hidden_tag() }}
      &lt;p&gt;
          {{ form.username.label }}&lt;br&gt;
          {{ form.username(size=32) }}
      &lt;/p&gt;
      &lt;p&gt;
          {{ form.password.label }}&lt;br&gt;
          {{ form.password(size=32) }}
      &lt;/p&gt;
      &lt;p&gt;{{ form.remember_me() }} {{ form.remember_me.label }}&lt;/p&gt;
      &lt;p&gt;{{ form.submit() }}&lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  <pre><code>class LoginForm(FlaskForm):
      username = StringField('Username', validators=[DataRequired()])
      password = PasswordField('Password', validators=[DataRequired()])
      remember_me = BooleanField('Remeber Me')
      submit = SubmitField('Sign In')
  </code></pre>
  <p>And a basic Bootstrap form:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;form&gt;
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;exampleInputEmail1&quot;&gt;Username&lt;/label&gt;
          &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;exampleInputEmail1&quot; aria-describedby=&quot;emailHelp&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group&quot;&gt;
          &lt;label for=&quot;exampleInputPassword1&quot;&gt;Password&lt;/label&gt;
          &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;exampleInputPassword1&quot;&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group form-check&quot;&gt;
          &lt;input type=&quot;checkbox&quot; class=&quot;form-check-input&quot; id=&quot;exampleCheck1&quot;&gt;
          &lt;label class=&quot;form-check-label&quot; for=&quot;exampleCheck1&quot;&gt;Remember Me&lt;/label&gt;
      &lt;/div&gt;
      &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Sign In&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <p>I don't understand how to use the Flask-style placeholders in Bootstrap code.</p>
  <p><em>Note: I don't know why the HTML is mostly orange; if anyone could change it so it looks more clear that would be great.</em></p>