title: How to make Symfony/Bootstrap checkbox errors display outside of the form_widget?
body: <p>I'm not sure how I explain this... :)
  I am using symfony, twig and bootstrap to make a basic registration form on my website.
  I have a checkbox at the end which the user must tick to accept the terms and conditions. the label for this checkbox includes HTML (the  tag) which Bootstrap (or Twig) escapes, so I have to use a custom label next to the checkbox:</p>
  
  <pre><code>&lt;div class="row align-items-center"&gt; &lt;!-- this is a workaround, may not be best practise --&gt;
                {{ form_errors(form.acceptTerms) }}
                {{ form_widget(form.acceptTerms, { 'attr': {'form.acceptTerms.errors': ' '} }) }}
                  &lt;label class="form-check-label" for="acceptTerms"&gt;I have read and accepted the &lt;a href="terms.php"&gt;Terms and Conditions&lt;/a&gt;&lt;/label&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Bootstrap renders the label as part of the <code>form_widget</code> twig element rather than the <code>form_label</code> , and the <code>form_error</code> is also rendered within the <code>form_widget</code> when there is an error. So, before, my label would just be displayed in plaintext, i.e. the html <code>&lt;a&gt;</code>  tags would be visible to the user. But of course, since I am showing a custom label as well as the widget which includes the label, I have to set the widget label to ' ' (empty string) so now only one label is shown.
  This work perfectly, UNTIL there is an error (i.e. the user doesn't tick the box and thus cannot register).
  Then the error displays within the <code>form_widget</code> which is next to my custom label (they are in a bootstrap <code>row</code> div) and it ends up pushing my label to the right, when I want the error to be above the label. I tried adding {{form_errors(form.acceptTerms) }} above it as you can see, but that just displays the error BOTH above and next to the label. This is what it looks like with the above code in place:</p>
  
  <pre><code>ERROR you must accept the terms and conditions!
  [ ] ERROR you must accept the terms and conditions!I Accept the **Terms and Conditions**
  </code></pre>
  
  <p>then this is what I WANT it to look like:</p>
  
  <pre><code>ERROR you must accept the terms and conditions!
  [ ] I accept the **Terms and Conditions**
  </code></pre>
  
  <p>This seems like it should be a really easy thing to do, I don't know why its this difficult.
  I need to somehow stop bootstrap from rendering the <code>form_error</code> and <code>form_label</code> within the <code>form_widget</code> .
  Thanks</p>