How to align the button to two inputs?

Question

How to align the button to two inputs?

Navigation

#1 by (2 votes)
#2 by (2 votes)

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.

html input twitter-bootstrap bootstrap

asked by anonymous 01.06.2017 / 16:01

2 answers

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

Open windows explorer using PHP and / or JS Add values with jquery, string to number

score 2 · Accepted Answer

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