Can I include headers inside form-groups?
<p>I would like to know if its OK for me to include a header/s (h1) inside a form-group? I have added a simple form to the snippet for an example.</p>

<p>I am not super clear on if I can or cannot include it in this way? Just want to make sure I am doing it correctly.</p>

<p>The reason why I am doing it like this, is because the headers align perfectly flush with left-hand side of the form, otherwise nesting them outside the form-group makes them sit further to the left.</p>

<p>So, are they similar to the legend property in a form if I wish to use headers instead?</p>

<p>Cheers!</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"&gt;
&lt;!-- Latest compiled and minified CSS --&gt;
&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;

&lt;!-- Latest compiled and minified JavaScript --&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;

&lt;div class="container"&gt;
  &lt;div class="col-md-12"&gt;
    &lt;form&gt;
      &lt;div class="form-group"&gt;
        &lt;h1&gt;Form details&lt;/h1&gt;
        &lt;h4&gt;Please fill out this form&lt;/h4&gt;

        &lt;label for="exampleInputEmail1"&gt;Email address&lt;/label&gt;
        &lt;input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
        &lt;label for="exampleInputPassword1"&gt;Password&lt;/label&gt;
        &lt;input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"&gt;
      &lt;/div&gt;
      &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>