Bootstrap Button Inside Input-group

Question

How to make it so that it appears nicely after input page with same height?

Solution 1:

If you follow bootstrap's documentation:

<div class="input-group">
  <inputtype="text"class="form-control"placeholder="Search for..."><spanclass="input-group-btn"><buttonclass="btn btn-default"type="submit"><iclass="fa fa-search"></i></button></span></div>

Solution 2:

here is my solution, using a little CSS to position the button to the right of the input field by adding position: absolute and a z-index:

button.input-group-addon {
  position: absolute;
  right: -38px;
  top: 0;
  padding: 2px;
  z-index: 999;
  height: 34px;
  width: 38px;
}

http://jsfiddle.net/6mcxdjdr/1/

Another idea is to manipulate the form submit with javascript, so you dont have to create your own button but submit the form by clicking on the bootstrap span. This could be done by $('.input-group-addon').click(function(){ $('#myform').submit(); });

Solution 3:

You can also try this way

<divclass="input-group"><inputtype="text"class="form-control search-input" /><spanclass="input-group-addon"><iclass="fa fa-search"></i></span><spanclass="input-group-addon"><iclass="fa fa-refresh"></i></span></div>

.search-input {
  border-right: 0;
}

.input-group-addon {
  background: white;
  border-left: 0;
  border-right: 0;
}

.input-group-addon:last-child {
  border-left: 0;
  border-right: 1px solid #ccc;
}

Solution 4:

Bootstrap 4 provides the classes input-group-prepend and input-group-append that allows the effect of button inside input.

Below the snippet for a left aligned button inside input-group (class input-group-prepend):

@import"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css";

<divclass="input-group"><divclass="input-group-prepend"><buttonclass="btn btn-outline-secondary"type="button">Prepended button</button></div><inputtype="text"class="form-control"></div>

And the snippet for a right aligned button inside input-group (class input-group-append):

@import"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css";

<divclass="input-group"><inputtype="text"class="form-control"><divclass="input-group-append"><buttonclass="btn btn-outline-secondary"type="button">Button</button></div></div>

Solution 5:

Try this,

.input-group-addon{
width:50px;  
position:absolute;
margin-left:196px;
height:34px;
}
.input-group-addon > i{
  text-align:center;
  font-size:18px;
}

Html5 Guide