csstwitter-bootstrap

Bootstrap: align input with button


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.

enter image description here


Solution

  • Twitter Bootstrap 5

    In Twitter Bootstrap 5, inputs and buttons can be aligned using the input-group class (see https://getbootstrap.com/docs/5.0/forms/input-group/#button-addons).

    Group button on the left side

    <div class="input-group mb-3">
      <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
      <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
    </div>
    

    Group button on the right side

    <div class="input-group mb-3">
      <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
      <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
    </div>
    

    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.