CODEWITHSUNDEEP
csstwitter-bootstrap
pguardiario
pguardiario

Reputation: 54984

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

Upvotes: 331

Views: 470582

Answers (12)

My Head Hurts
My Head Hurts

Reputation: 37665

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.

Upvotes: 608

Karl Adler
Karl Adler

Reputation: 16786

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.

example for bs3 input group button

Upvotes: 221

rashedcs
rashedcs

Reputation: 3725

Take an input float as left. Then take the button and float it right. You can clearfix class when you take more than one to distance. 

<input style="width:65%;float:left"class="btn btn-primary" type="text" name="name"> 
<div style="width:8%;float:left">&nbsp;</div>
<button class="btn btn-default" type="button">Go!</button>
<div class="clearfix" style="margin-bottom:10px"> </div>

Upvotes: 1

Alexander Kim
Alexander Kim

Reputation: 18382

Bootstrap 4:

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-append">
    <button class="btn btn-success" type="button">Button</button>
  </div>
</div>

https://getbootstrap.com/docs/4.0/components/input-group/

Upvotes: 6

Bikash Bishwokarma
Bikash Bishwokarma

Reputation: 373

I was also struggling with same issue. The bootstrap classes I use are not working for me. I came up with an workaround, as below:

<form action='...' method='POST' class='form-group'>
  <div class="form-horizontal">
    <input type="text" name="..." 
        class="form-control" 
        placeholder="Search People..."
        style="width:280px;max-width:280px;display:inline-block"/>

    <button type="submit" 
        class="btn btn-primary" 
        style="margin-left:-8px;margin-top:-2px;min-height:36px;">
      <i class="glyphicon glyphicon-search"></i>
     </button>
  </div>
</form>

Basically, I overrode the display property of class "form-control", and used other style properties for correcting the size and position.

Following is the result:

enter image description here

Upvotes: 6

Trond
Trond

Reputation: 11

Not directly related, unless you have similar code but I just noticed a strange behaviour to form-inline, bootstrap 3.3.7

I did not use row and cells for this as it is a desktop project, if the opening tag was below table (in this case):

<table class="form-inline"> 
<form> 
<tr>

Form elements would stack.

Switch and it properly lined up.

<form>
<table class="form-inline">
<tr>

Safari 10.0.2 and latest Chrome did not make any differences. Maybe my layout was wrong but it is not very forgiving.

Upvotes: 1

kupaff
kupaff

Reputation: 329

I tried all the above codes and none of them fixed my issues. Here is what worked for me. I used input-group-addon. 

<div class = "input-group">
  <span class = "input-group-addon">Go</span>
  <input type = "text" class = "form-control" placeholder="you are the man!">
</div>

Upvotes: 3

Ashu Designer
Ashu Designer

Reputation: 178

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

Upvotes: 4

Abhimanyu
Abhimanyu

Reputation: 2213

I tried above all and end-up with few changes which I would like to share. Here's the code which works for me (find the attached screenshot):

<div class="input-group">
    <input type="text" class="form-control" placeholder="Search text">
    <span class="input-group-btn" style="width:0;">
        <button class="btn btn-default" type="button">Go!</button>
    </span>
</div>

enter image description here

If you want to see it working, just use below code in you editor:

<html>
    <head>
        <link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
    </head>
    <body>
        <div class="container body-content">
            <div class="form-horizontal">
              <div class="input-group">
                  <input type="text" class="form-control" placeholder="Search text">
                  <span class="input-group-btn" style="width:0;">
                      <button class="btn btn-default" type="button">Go!</button>
                  </span>
              </div>
            </div>
        </div>
    </body>
</html>

Hope this helps.

Upvotes: 17

Zach J.
Zach J.

Reputation: 214

style="padding-top: 8px"

Use this to shift your div up or down in your row. Works wonders for me.

Upvotes: -1

ZEESHAN ARSHAD
ZEESHAN ARSHAD

Reputation: 576

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

Upvotes: 35

Oleksiy Khilkevich
Oleksiy Khilkevich

Reputation: 809

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

Upvotes: 38

Related Questions