Walter West
Walter West

Reputation: 859

How to add link or button to form-group in bootstrap

How can I add link or button right of input not using class="form-inline".

<form class="form-horizontal" role="form" action=""  method="post">
    <div class="form-group" id="formGroupSubject">
        <label for="inputSubjectx" class="col-sm-2 control-label">Name</label>
        <div class="col-sm-10">
        <input type="text" class="form-control" id="inputSubjectx" name="inputSubjectx" >
    </div>
 </div>
  <div class="form-group" >
    <div class="col-sm-offset-9 col-sm-2" col-sm-offset-1>
      <button type="submit" class="btn btn-warning">Send</button>
    </div>
  </div>
</form>

Upvotes: 0

Views: 7305

Answers (1)

vanburen
vanburen

Reputation: 21663

You can use Bootstrap Input Groups

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form class="form-horizontal" role="form" action="" method="post">
    <div class="form-group" id="formGroupSubject">
      <label for="inputSubjectx" class="col-sm-2 control-label">Name</label>
      <div class="col-sm-10">
        <div class="input-group">
          <input type="text" class="form-control" id="inputSubjectx" name="inputSubjectx" /> <span class="input-group-btn">
        <button class="btn btn-danger" type="button">Press!</button>
      </span>

        </div>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-9 col-sm-2" col-sm-offset-1>
        <button type="submit" class="btn btn-warning">Send</button>
      </div>
    </div>
  </form>
</div>

Upvotes: 1

Related Questions