bootstrap inline-help span is not inline when using with input fields with class span

Question

I'm using the inline-help class from bootstrap next to an input field that has a "span11" class. The span does not appear inline with the input field and rather it shows up on the next line because of the class "span11"

Here is the code:

<div class="control-group error" id="password-control">
<label class="control-label" for="password-confirm">Confirm Password</label>
<input type="password" size="30" name="register[confirm]" id="password-confirm" class="span11">
<span class="help-inline">password did not match</span>

when I get rid of span11, it shows up next to the input field. I need the span11 for responsive text fields so I can't remove it. Any idea how I can fix this? Thank you!:)

Answer 1

In Twitter Bootstrap, <input>'s are intended to be sized using the classes:

input-small
input-medium
input-large
input-xlarge
input-xxlarge

The spanX classes are more intended for <div>'s and other containery elements (though I admit to having used them to good effect on other things).

If you are using the responsive CSS that is provided with Bootstrap, once you get down to phone-sized viewport widths all spanX classes become width:100%;, which will guarantee that your help-inline content will get pushed to the next line.

At least with input-small and input-medium they won't ever fill the entire width, and you could keep the help-inline there, as long as the viewport isn't ridiculously small.