Skip to main content
adicionou 281 caracteres ao conteúdo
Fonte Link
Artur Trapp
  • 5,3mil
  • 1
  • 17
  • 48

Recomendo que dê uma lida no Bootstrap grid system caso vá usar bootstrap.

Para alinhar seu botão abaixo (presumi que era abaixo que você queria, baseado no trecho de código que você deu), simplesmente adicionei a classe form-control no botão, e coloquei dentro de uma div com a classe 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 <form>class="form-group">
    <div class="form-groupgroup">
 col-sm       <div class="input-3">group">
    <label        <span class="input-group-addon"><label       for="exampleInputName2">Name</label>label></span>
            <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>          
  <div class="form-group col        <span class="input-smgroup-3">addon">
            <label for="exampleInputEmail2">Email</label>
            </span>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>          
  <div class="col         <span class="input-mdgroup-12">btn">
  <button type="submit"     <button class="btn btn-defaultdefault" form-control">Sendtype="button">Send invitation</button>
   </span>
            
        </div>
    </div>
</div>
</form> 



</div>

Recomendo que dê uma lida no Bootstrap grid system caso vá usar bootstrap.

Para alinhar seu botão abaixo (presumi que era abaixo que você queria, baseado no trecho de código que você deu), simplesmente adicionei a classe form-control no botão, e coloquei dentro de uma div com a classe 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>
  <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>
  <div class="col-md-12">
  <button type="submit" class="btn btn-default form-control">Send invitation</button>
  </div>
</form>


</div>

Recomendo que dê uma lida no Bootstrap grid system caso vá usar bootstrap.

Para alinhar seu botão abaixo (presumi que era abaixo que você queria, baseado no trecho de código que você deu), simplesmente adicionei a classe form-control no botão, e coloquei dentro de uma div com a classe 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>

Fonte Link
Artur Trapp
  • 5,3mil
  • 1
  • 17
  • 48

Recomendo que dê uma lida no Bootstrap grid system caso vá usar bootstrap.

Para alinhar seu botão abaixo (presumi que era abaixo que você queria, baseado no trecho de código que você deu), simplesmente adicionei a classe form-control no botão, e coloquei dentro de uma div com a classe 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>
  <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>
  <div class="col-md-12">
  <button type="submit" class="btn btn-default form-control">Send invitation</button>
  </div>
</form>


</div>