Bootstrap dismissable alerts
<p>I have a form in my django project and I want to display the form errors if any when the user clicks submit. This is one of my fields (working on getting one right before I move on to others)</p>

<pre><code>&lt;div class="form-group"&gt;
    &lt;label class="control-label col-md-3 col-sm-3 col-xs-12" for="title"&gt;Title
    &lt;/label&gt;

    &lt;div class="col-md-6 col-sm-6 col-xs-12"&gt;
        {{ form.title }}
    &lt;/div&gt;
    &lt;div class="col-md-3 .col-md-offset-3"&gt;
{#                                        &lt;p class="text-danger"&gt;{% for error in form.title.errors %}{{ error }}{% endfor %}&lt;/p&gt;#}
        &lt;div class="alert alert-warning alert-dismissible" role="alert"&gt;
            &lt;button type="button" class="close" data-dismiss="alert" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
            &lt;p&gt;{% for error in form.title.errros %} {{ error }} {% endfor %}&lt;/p&gt;
        &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>However I have 2 issues : </p>

<ol>
<li>The alert shows up when the form loads, without the error message:</li>
</ol>

<p><a href="https://i.stack.imgur.com/ynChw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ynChw.png" alt="alert on form load"></a></p>

<ol start="2">
<li>When I dismiss the alert the form styling gets messed up:</li>
</ol>

<p><a href="https://i.stack.imgur.com/DqbqQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DqbqQ.png" alt="styling messed up"></a></p>

<p>I cant seem to understand what the issue is.</p>

<p>I was able to get the error message without the bootstrap alerts using this code. However it would be great to let the user dismiss an alert after the correction has been made:</p>

<pre><code>&lt;div class="form-group"&gt;
    &lt;label class="control-label col-md-3 col-sm-3 col-xs-12" for="title"&gt;Title
    &lt;/label&gt;

    &lt;div class="col-md-6 col-sm-6 col-xs-12"&gt;
    {{ form.title }}
    &lt;/div&gt;
    &lt;span class="help-block"&gt;
        &lt;p class="text-danger"&gt;{% for error in form.title.errors %}{{ error }}{% endfor %}&lt;/p&gt;
    &lt;/span&gt;
&lt;/div&gt;
</code></pre>