Reputation: 1088
I'm upgrading to Bootstrap 3, but I just can't figure out how to upgrade my old input-appends.
I had something like this:
<div class="input-append">
<select>
<option>hi</option>
<option>hi2</option>
</select>
<span class="input-group-addon"></span>
<input type="submit" class="btn" value="valami">
</div>
Preview: http://bootply.com/75910
In Bootstrap 3, this is the closest I could get
<div class="input-group">
<select class="form-control">
<option>hi</option>
<option>hi2</option>
</select>
<span class="input-group-addon"></span>
<input type="submit" class="form-control btn btn-default" value="valami">
</div>
Preview: http://bootply.com/75912
If I remove that span it gets perfect, but they are in different lines.
Any idea how to do this properly?
Upvotes: 47
Views: 60938
Reputation: 40973
This is documented here and here:
Remove input-prepend and input-append for singular
.input-group
. The classes have changed for the elements within, and require a bit more markup to use buttons:
- Use
.input-group
as the parent class around the input and addon.- For text based prepends/appends, use
.input-group-addon
instead of.addon
.- For button prepends/appends, use
.input-group-btn
and place your.btn
within that element.
Example:
<div class="container">
<div class="row">
<div class="col-sm-3 col-xs-12 col-lg-3">
<form class="form-search">
<div class="input-group">
<input type="text" class="form-control " placeholder="Text input">
<span class="input-group-btn">
<button type="submit" class="btn btn-search">Search</button>
</span>
</div>
</form>
</div>
</div>
</div>
EDIT: Working examples from @kviktor and @max4ever:
Upvotes: 86