<p dir="auto">This does have some overlap to issue <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="3196901" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/1939" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/1939/hovercard" href="https://github.com/twbs/bootstrap/issues/1939">#1939</a>, but I'm targeting the overall use case for forms.  It's fairly common to update a form with error messages using js or to display some error messages after an unsuccessful submission.  Some errors might target a field, while other might be global in nature. See the following jsfiddle for examples:</p>
<p dir="auto"><a href="http://jsfiddle.net/HFzQv/" rel="nofollow">http://jsfiddle.net/HFzQv/</a></p>
<p dir="auto">The first form displayed has a form-level error message (not isolated to a certain field).  One way to markup/style that would be for it to be an <code class="notranslate">.alert</code>, but I'm not certain if that is the correct usage and/or if you guys might have another approach in mind for this.</p>
<p dir="auto">The second form shows a field in an error state with an error message for the field just before the field's <code class="notranslate">.help-block</code> providing general help on filling out the field.  It seems like the error message for the field should stand out; as it is now, it seems lost along with the other text.  Thoughts? (this is the part that is also addressed by <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="3196901" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/1939" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/1939/hovercard" href="https://github.com/twbs/bootstrap/issues/1939">#1939</a>)</p>
<p dir="auto">When a form is styled with form control states (<a href="http://twitter.github.com/bootstrap/base-css.html?#forms">http://twitter.github.com/bootstrap/base-css.html?#forms</a>, scroll down a little), all help texts (both help-inline and help-block) take their styling from the control state (error, warning, etc).</p>
<p dir="auto">However, the example fails to take regular help text into account.</p>
<p dir="auto">With the current version of Bootstrap, any help text within a control-group with a state class is styled as if it is part of the error message, which is wrong. The help text should be styled as what it is, a help text. The underlying issue here of course is that the messages are using the classes for help.</p>
<p dir="auto">I made a small demo of the official Bootstrap example with added help-block p's with regular help text. I hope this illustrates the problem:</p>
<p dir="auto"><a href="http://jsfiddle.net/TE7HK/1/" rel="nofollow">http://jsfiddle.net/TE7HK/1/</a> (same goes for help-inline)</p>
<p dir="auto">I see two possible solutions.</p>
<ol dir="auto">
<li>Make a difference between help-inline/help-block and message-inline/message-block. Messages are styled like help texts, but take their colors from a surrounding control-group.error class. This would break compatibility with 2.0.0 as far as colors go, but not the actual display of items. Also, it would introduce 2 new classes (message-inline, message-block).</li>
<li>Add the option to define a help-block and help-inline with an extra class "help", which makes them unaffected by surrounding error, warning, etc.</li>
</ol>
<p dir="auto">e.g.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;p class=&quot;help-block&quot;&gt;I will take the color from my control state. If there isn't any, I'll be styled like help.&lt;/p&gt;
&lt;p class=&quot;help-block help&quot;&gt;You won't see mee turn red because of an error!&lt;/p&gt;
&lt;p class=&quot;help-block error&quot;&gt;I will always be displayed as an error text, regardless of the control state.&lt;/p&gt;"><pre class="notranslate"><code class="notranslate">&lt;p class="help-block"&gt;I will take the color from my control state. If there isn't any, I'll be styled like help.&lt;/p&gt;
&lt;p class="help-block help"&gt;You won't see mee turn red because of an error!&lt;/p&gt;
&lt;p class="help-block error"&gt;I will always be displayed as an error text, regardless of the control state.&lt;/p&gt;
</code></pre></div>
<p dir="auto">After writing this up, I'm in favor of solution <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1446398" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/2" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/2/hovercard" href="https://github.com/twbs/bootstrap/issues/2">#2</a>.</p>