Input And Button In Same Line With Bootstrap

I want to put an input field and a Button in the same line. I want to set fix size for the button, and and I want the form to fill the available space. I've tried to create my own

Solution 1:

There's a couple of things you can do. One is use inline forms, another is using input groups and an input-group-btn. Here is a plunkr: https://plnkr.co/edit/BNPRY0NL1G1fP7s24mFM?p=preview

My preference is the input-group-btn

<div class="input-group">
    <inputclass="form-control width100"><spanclass="input-group-btn"><buttonclass="btn btn-info">MyButton</button></span></div>

Solution 2:

Here is your answer: Group on the left Side

<div class="input-group">
  <spanclass="input-group-btn"><buttonclass="btn btn-default"type="button">Go!</button></span><inputtype="text"class="form-control"></div>

Group on the right side:

<div class="input-group">
   <inputtype="text"class="form-control"><spanclass="input-group-btn"><buttonclass="btn btn-default"type="button">Go!</button></span></div>

Solution 3:

You can use the "form-inline" class made by bootstrap

<form class="form-inline">
    <inputtype="text"class="form-control"><inputtype="submit"value="button"class="btn btn-primary"></form>

Solution 4:

You want something like this

<div class="input-group">
   <inputtype="text"class="form-control" ><spanclass="input-group-btn"><buttonclass="btn btn-primary"type="button">Submit</button></span></div>

Solution 5:

According to the documentation at http://getbootstrap.com/components/#input-groups, you can do this with in house Bootstrap CSS:

<divclass="input-group"><inputtype="text"class="form-control"placeholder="Your text field..."> <-- Text field
    <divclass="input-group-btn"><buttontype="button"class="btn btn-default">Your button</button> <-- Inline button
    </div></div>

Hope I can help!