Why don't buttons and inputs align well in Bootstrap?
I tried something simple like:
<input type="text"/><button class="btn">button</button>
The button is about 5px
lower than the input in chrome/firefox.
csstwitter-bootstrap
Why don't buttons and inputs align well in Bootstrap?
I tried something simple like:
<input type="text"/><button class="btn">button</button>
The button is about 5px
lower than the input in chrome/firefox.
Best Answer
Twitter Bootstrap 4
In Twitter Bootstrap 4, inputs and buttons can be aligned using the
input-group-prepend
andinput-group-append
classes (see https://getbootstrap.com/docs/4.0/components/input-group/#button-addons)Group button on the left side (prepend)
Group button on the right side (append)
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
Group button on the right side
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:As pointed out by @OleksiyKhilkevich in his answer, there is a second way to align
input
andbutton
by using the.form-horizontal
class:The Differences
The difference between these two classes is that
.input-append
will place thebutton
up against theinput
element (so they look like they are attached), where.form-horizontal
will place a space between them.-- Note --
To allow the
input
andbutton
elements to be next to each other without spacing, thefont-size
has been set to0
in the.input-append
class (this removes the white spacing between theinline-block
elements). This may have an adverse effect on font-sizes in theinput
element if you want to override the defaults usingem
or%
measurements.