Vincent Decaux Vincent Decaux - 6 months ago 18
CSS Question

Boostrap 3 input with addon and help block

Using Bootstrap CSS 3.3.1, I got a little problem with an input with an addon and a help block.

Just see the fiddle : https://jsfiddle.net/L8cyqoL1/1/

Tested on Firefox / Chrome. Is the markup wrong ? I tried "input-group" ... as class without success

Here is the markup :

<div class="form-group">
<label for="title" class="control-label col-md-3">Titre de la page</label>
<div class="col-md-9 input-group">
<div class="input-group-addon">
@
</div>
<input type="text" value="Value test" class="form-control input-xxlarge" id="title" name="title" size="46" />
<span class="help-block">Help Lorem Ipsum</span>
</div>
</div>

Ted Ted
Answer

Try it like this:

<div class="form-horizontal">
    <div class="form-group">
        <label for="title" class="control-label col-sm-3">Titre de la page</label>
        <div class="col-sm-9">
            <div class="input-group">
              <span class="input-group-addon">@</span>
                <input type="text" id="title" name="title"  class="form-control" />
            </div>
            <p class="help-block">Example block-level help text here.</p>
        </div>
    </div>
</div>

See this updated fiddle

(stretch the preview pane to see the column support)