CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
user1552545
user1552545

Reputation: 1331

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, but unfortunately the button is lower than the input field. How can I fix this?

enter image description here

CSS:

.input-bar {
    display: table;
    width: 100%;
}

.input-bar-item {
    display: table-cell;
}

.input-bar-item > button {
    margin-left: 5px;
}

.width100 {
  width: 100%;
}

HTML:

  <div class="input-bar">
    <div class="input-bar-item width100">
      <form>
         <div class="form-group">
            <input class="form-control width100">
        </div>
      </form>
    </div>
    <div class="input-bar-item">
      <button class="btn btn-info">MyButton</button>
    </div>
  </div>

https://plnkr.co/edit/5clqg067q4DiMHRkoPEY?p=preview

Upvotes: 19

Views: 65872

Answers (5)

Joey
Joey

Reputation: 1370

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">
    <input class="form-control width100">
    <span class="input-group-btn">
        <button class="btn btn-info">MyButton</button>
    </span>
</div>

Upvotes: 57

Spencer B.
Spencer B.

Reputation: 21

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

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

Hope I can help!

Upvotes: 2

Jamie Eltringham
Jamie Eltringham

Reputation: 806

You want something like this 

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

Upvotes: 3

SESN
SESN

Reputation: 1283

Here is your answer: Group 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 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>

Upvotes: 10

AfikDeri
AfikDeri

Reputation: 2109

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

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

Upvotes: 8

Related Questions