How to align the button to two inputs?

Question

<div class="container">
  <h2>Button Tags</h2>


  <form>
  <div class="form-group col-sm-3">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group col-sm-3">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>


</div>

Way it appears:

I want the button on the same input line.

Answer 1

Try it this way:

.btn-enviar {
  margin-top: 9.5%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <h2>Button Tags</h2>


  <form>
  <div class="row">
    <div class="col-sm-3 form-group">
      <label for="exampleInputName2">Name</label>
      <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 form-group">
      <label for="exampleInputEmail2">Email</label>
      <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
    </div>
    <div class="col-sm-3">
      <button type="submit" class="btn btn-default btn-enviar">Send invitation</button>
    </div>
  </div>
</form>


</div>

Expand the code snippet

Answer 2

I recommend you take a look at Bootstrap grid system if you are going to use bootstrap.

To align your button below (I assumed it was below you wanted, based on the code snippet you gave), I simply added the class form-control on the button, and put inside a div with the class col-md-12.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
  <h2>Button Tags</h2>

<form class="form-inline">
<div class="form-group">
    <div class="form-group">
        <div class="input-group">
            <span class="input-group-addon"><label       for="exampleInputName2">Name</label></span>
            <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
            
            <span class="input-group-addon">
            <label for="exampleInputEmail2">Email</label>
            </span>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
            
            <span class="input-group-btn">
        <button class="btn btn-default" type="button">Send invitation</button>
   </span>
            
        </div>
    </div>
</div>
</form>



</div>