title: What is the Best Practice for placing validation messages using Twitter Bootstrap 3
body: <p>I'm using MVC4 but I imagine this is an issue for anyone using the new Bootstrap 3 version.  Since form-control is now width:100% by default, what is the best practice for placing validation messages?  </p>
  
  <p>In version 2.x, placing the validation messages in the help-inline span just after the input control worked best to ensure that the message was placed to the right of the control.
  <img src="https://i.stack.imgur.com/raxd4.png" alt="enter image description here"></p>
  
  <p>But in version 3, they always get pushed to the bottom making all the controls shift down because the validation messages are forced under the control.<img src="https://i.stack.imgur.com/BXWAz.png" alt="enter image description here"></p>
  
  <pre><code>&lt;div class="form-group has-error"&gt;
      &lt;label for="Label" class="col-lg-2 control-label"&gt;Label&lt;/label&gt;
      &lt;div class="col-lg-5"&gt;
          &lt;input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value=""&gt;
          &lt;span class="help-inline"&gt;&lt;span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"&gt;&lt;span for="Label" generated="true" class=""&gt;Required&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've considered manually setting them on a new column like this (below) but wondering if there was a more acceptable way or a less manual way of dealing with this.</p>
  
  <pre><code>&lt;div class="form-group has-error"&gt;
      &lt;label for="Label" class="col-lg-2 control-label"&gt;Label&lt;/label&gt;
      &lt;div class="col-lg-5"&gt;
          &lt;input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="Label" name="Label" type="text" value=""&gt;
      &lt;/div&gt;
      &lt;div class="col-lg-5"&gt;
          &lt;p class="form-control-static"&gt;&lt;span class="field-validation-error" data-valmsg-for="Label" data-valmsg-replace="true"&gt;&lt;span for="Label" generated="true" class=""&gt;Required&lt;/span&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>