Twitter Bootstrap input fields

Question

In http://twitter.github.com/bootstrap/base-css.html#forms the following code gives nicely styled input field with button attached to each other.

<div class="input-append">
  <input class="span2" id="appendedInputButton" type="text">
  <button class="btn" type="button">Go!</button>
</div>

My question is how would I have two input fields next to each other before the button with the same styling (no double borders in between)

I tried doing

<div class="input-append">
  <input class="span2" id="appendedInputButton" type="text">
  <input class="span2" id="appendedInputButton" type="text">
  <button class="btn" type="button">Go!</button>
</div>

but the styling broke.

Answer 1

If you are using bootstrap, button-group is the thing you are looking for:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">Left</button>
  <button type="button" class="btn btn-secondary">Middle</button>
  <button type="button" class="btn btn-secondary">Right</button>
</div>

Answer 2

i hope the below code will help..

#appendedInputButton2{
  border-left:0;
}

<div class="input-append">
  <input class="span2" id="appendedInputButton1" type="text">
  <input class="span2" id="appendedInputButton2" type="text">
  <button class="btn" type="button">Go!</button>
</div>