Bootstrap: align input with button
Twitter Bootstrap 4
In Twitter Bootstrap 4, inputs and buttons can be aligned using the input-group-prepend
and input-group-append
classes (see https://getbootstrap.com/docs/4.0/components/input-group/#button-addons)
Group button on the left side (prepend)
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
<input type="text" class="form-control">
</div>
Group button on the right side (append)
<div class="input-group mb-3">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
Twitter Bootstrap 3
As shown in the answer by @abimelex, inputs and buttons can be aligned by using the .input-group
classes (see http://getbootstrap.com/components/#input-groups-buttons)
Group button on the left side
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control">
</div>
Group button on the right side
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
This solution has been added to keep my answer up to date, but please stick your up-vote on the answer provided by @abimelex.
Twitter Bootstrap 2
Bootstrap offers an .input-append
class, which works as a wrapper element and corrects this for you:
<div class="input-append">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
As pointed out by @OleksiyKhilkevich in his answer, there is a second way to align input
and button
by using the .form-horizontal
class:
<div class="form-horizontal">
<input name="search" id="search"/>
<button class="btn">button</button>
</div>
The Differences
The difference between these two classes is that .input-append
will place the button
up against the input
element (so they look like they are attached), where .form-horizontal
will place a space between them.
-- Note --
To allow the input
and button
elements to be next to each other without spacing, the font-size
has been set to 0
in the .input-append
class (this removes the white spacing between the inline-block
elements). This may have an adverse effect on font-sizes in the input
element if you want to override the defaults using em
or %
measurements.
Just the heads up, there seems to be special CSS class for this called form-horizontal
input-append has another side effect, that it drops font-size to zero
Bootstrap 5
<div class="input-group">
<input type="text" class="form-control">
<button class="btn btn-outline-secondary" type="button">Go</button>
</div>
Bootstrap 3 & 4
you may use the input-group button property to apply the button direct to the input-field.
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
Take a look at BS4 or BS5 Input-Group doc for many more examples.
Use .form-inline = This will left-align labels and inline-block controls for a compact layout
Example: http://jsfiddle.net/hSuy4/292/
<div class="form-inline">
<input type="text">
<input type="button" class="btn" value="submit">
</div>
.form-horizontal = Right align labels and float them to the left to make them appear on the same line as controls which is better for 2 column form layout.
(e.g.
Label 1: [textbox]
Label 2: [textbox]
: [button]
)
Examples: http://twitter.github.io/bootstrap/base-css.html#forms