How to align the button to two inputs?

1
<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>

How it appears:

I want the button on the same line as the inputs.

    
asked by anonymous 01.06.2017 / 16:01

2 answers

2

Try this:

.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

    
01.06.2017 / 19:47
2

I recommend that you read the Bootstrap grid system if you are going to bootstrap.

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="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>
    
01.06.2017 / 16:06