Bootstrap align input with button

Question

Why don t buttons and inputs align well in Bootstrap   I tried something simple like    lt input type  text   gt  lt button class  btn  gt button lt  button gt    The button is about 5px lower than the input in chrome firefox

User · Answer

lt form class  form-inline  gt     lt div class  form-group  gt       lt label class  sr-only  for  exampleInputEmail3  gt Email address lt  label gt       lt input type  email  class  form-control  id  exampleInputEmail3  placeholder  Email  gt     lt  div gt     lt button type  submit  class  btn btn-default  gt Sign in lt  button gt   lt  form gt

User · Answer

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

User · Answer

style  padding-top  8px    Use this to shift your div up or down in your row   Works wonders for me

User · Answer

Bootstrap 5  lt div class  quot input-group quot  gt     lt input type  quot text quot  class  quot form-control quot  gt     lt button class  quot btn btn-outline-secondary quot  type  quot button quot  gt Go lt  button gt   lt  div gt   Bootstrap 3  amp  4 you may use the input-group button property to apply the button direct to the input-field   lt div class  quot input-group quot  gt     lt input type  quot text quot  class  quot form-control quot  gt     lt span class  quot input-group-btn quot  gt       lt button class  quot btn btn-default quot  type  quot button quot  gt Go  lt  button gt     lt  span gt   lt  div gt  lt  --  input-group -- gt   Take a look at BS4 or BS5 Input-Group doc for many more examples

User · Answer

Use  form-inline   This will left-align labels and inline-block controls for a compact layout  Example  http   jsfiddle net hSuy4 292    lt div class  form-inline  gt   lt input type  text  gt   lt input type  button  class  btn  value  submit  gt   lt  div gt     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

User · Answer

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     lt table class  form-inline  gt    lt form gt    lt tr gt    Form elements would stack   Switch and it properly lined up    lt form gt   lt table class  form-inline  gt   lt tr gt    Safari 10 0 2 and latest Chrome did not make any differences  Maybe my layout was wrong but it is not very forgiving

User · Answer

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    lt div class  input-group mb-3  gt     lt div class  input-group-prepend  gt       lt button class  btn btn-outline-secondary  type  button  gt Button lt  button gt     lt  div gt     lt input type  text  class  form-control  gt   lt  div gt    Group button on the right side  append    lt div class  input-group mb-3  gt     lt div class  input-group-append  gt       lt button class  btn btn-outline-secondary  type  button  gt Button lt  button gt     lt  div gt     lt input type  text  class  form-control  gt   lt  div gt    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   lt div class  input-group  gt     lt span class  input-group-btn  gt       lt button class  btn btn-default  type  button  gt Go  lt  button gt     lt  span gt     lt input type  text  class  form-control  gt   lt  div gt    Group button on the right side   lt div class  input-group  gt      lt input type  text  class  form-control  gt      lt span class  input-group-btn  gt           lt button class  btn btn-default  type  button  gt Go  lt  button gt      lt  span gt   lt  div gt    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    lt div class  input-append  gt       lt input name  search  id  search   gt       lt button class  btn  gt button lt  button gt   lt  div gt    As pointed out by  OleksiyKhilkevich in his answer  there is a second way to align input and button by using the  form-horizontal class    lt div class  form-horizontal  gt       lt input name  search  id  search   gt       lt button class  btn  gt button lt  button gt   lt  div gt    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

User · Answer

Bootstrap 4    lt div class  input-group  gt     lt input type  text  class  form-control  gt     lt div class  input-group-append  gt       lt button class  btn btn-success  type  button  gt Button lt  button gt     lt  div gt   lt  div gt    https   getbootstrap com docs 4 0 components input-group

User · Answer

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    lt form action       method  POST  class  form-group  gt     lt div class  form-horizontal  gt       lt input type  text  name                class  form-control           placeholder  Search People             style  width 280px max-width 280px display inline-block   gt        lt button type  submit           class  btn btn-primary           style  margin-left -8px margin-top -2px min-height 36px   gt         lt i class  glyphicon glyphicon-search  gt  lt  i gt        lt  button gt     lt  div gt   lt  form gt    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

User · Answer

I tried all the above codes and none of them fixed my issues  Here is what worked for me  I used input-group-addon     lt div class    input-group  gt     lt span class    input-group-addon  gt Go lt  span gt     lt input type    text  class    form-control  placeholder  you are the man   gt   lt  div gt

User · Answer

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                                                   lt input style  width 65  float left class  btn btn-primary  type  text  name  name  gt    lt div style  width 8  float left  gt  amp nbsp  lt  div gt   lt button class  btn btn-default  type  button  gt Go  lt  button gt   lt div class  clearfix  style  margin-bottom 10px  gt   lt  div gt

User · Answer

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>

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.

[css] Bootstrap: align input with button

The answer is

Examples related to css

Examples related to twitter-bootstrap

Tags