CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Adrian
Adrian

Reputation: 2656

Adding button next to input, horizontal form style - Bootstrap

I am trying to add a delete button next to an input.

My current code:

<form role="form" method="post" id="form">
<div class="form-group">
      <div class="col-sm-9 ">
       <span>Názov položky</span>
       <input type="text" class="form-control">
      </div>
      <div class="col-sm-3 ">
        <span>Cena</span>
        <input type="text" class="form-control">
        <button class="btn btn-danger btn-md"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
    </div>
</div>
<p></p>
<button class="add_field_button btn btn-success btn-md"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
</form>

Generated output:

enter image description here

The red button isn't on the right side of the last input.

Upvotes: 1

Views: 3906

Answers (3)

OneCricketeer
OneCricketeer

Reputation: 191723

This might break on mobile, but it looks good in a CodePen

<form role="form" method="post" id="form">
  <div class="row">
    <div class="col-sm-8">
      <span>Názov položky</span>
      <input type="text" class="form-control">
    </div>
    <div class="col-sm-3">
      <span>Cena</span>
      <input type="text" class="form-control">
    </div>
    <div class="col-sm-1">
      <br/>
      <button class="btn btn-danger btn-md">
        <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
      </button>
    </div>
  </div>
  <p></p>
  <div>
    <button class="add_field_button btn btn-success btn-md">
      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
    </button>
  </div>
</form>

Upvotes: 1

vanburen
vanburen

Reputation: 21663

Maybe one of these will work. You can create some margin inside of a input-group so the button isn't touching the input or use the grid.

See working example Snippets.

.input-group .input-group-btn.input-space {
  padding-left: 15px;
}
.input-group .input-group-btn.input-space .btn-input {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
div.input-group .form-control.input-control {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
  <h3 class="well">Custom Input Group</h3>

  <div class="row">
    <form role="form" method="post" id="form">
      <div class="col-sm-9 ">
        <div class="form-group">
          <label>Názov položky</label>
          <input type="text" class="form-control">
        </div>
      </div>
      <div class="col-sm-3 ">
        <div class="form-group">
          <label>Cena</label>
          <div class="input-group">
            <input type="text" class="form-control input-control"> <span class="input-group-btn input-space">
         <button class="btn btn-danger btn-md btn-input"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>

            </button>
            </span>
          </div>
        </div>
      </div>
      <div class="col-sm-12">
        <div class="form-group">
          <button class="add_field_button btn btn-success btn-md"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>

          </button>
        </div>
      </div>
    </form>
  </div>
</div>
<hr>
<div class="container">
  <h3 class="well">Grid</h3>

  <div class="row">
    <form role="form" method="post" id="form">
      <div class="col-sm-7">
        <div class="form-group">
          <label>Názov položky</label>
          <input type="text" class="form-control">
        </div>
      </div>
      <div class="col-sm-3">
        <div class="form-group">
          <label>Cena</label>
          <input type="text" class="form-control">
        </div>
      </div>
      <div class="col-sm-2">
        <label>Odstrániť</label>
        <div class="form-group">
          <button class="btn btn-danger btn-md"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span>

          </button>
        </div>
      </div>
      <div class="col-sm-12">
        <div class="form-group">
          <button class="add_field_button btn btn-success btn-md"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>

          </button>
        </div>
      </div>
    </form>
  </div>
</div>

Upvotes: 2

Max
Max

Reputation: 7090

You must use the input-group as explained on the help page.

Here the relevant code

    <span>Cena</span>
    <div class="input-group">
        <input type="text" class="form-control">
        <div class="input-group-btn">
            <button class="btn btn-danger btn-md"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
        </div>
    </div>

Upvotes: 1

Related Questions