CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Boris Kozarac
Boris Kozarac

Reputation: 635

Bootstrap button inside input-group

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

<div class="input-group">
        <input type="text" class="form-control"/>
        <button class="input-group-addon" type="submit">
            <i class="fa fa-search"></i>
        </button>
</div>

Here is code http://jsfiddle.net/6mcxdjdr/ The first one is original input-group, the second one is something what I am trying to have

Upvotes: 25

Views: 62231

Answers (6)

francisco neto
francisco neto

Reputation: 807

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";
<div class="input-group">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Prepended button</button>
  </div>
  <input type="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";
<div class="input-group">
  <input type="text" class="form-control">  
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

Upvotes: 4

Rohit Sharma
Rohit Sharma

Reputation: 169

You can also try this way

 <div class="input-group">
          <input type="text" class="form-control search-input" />
          <span class="input-group-addon">
            <i class="fa fa-search"></i>
          </span><span class="input-group-addon">
            <i class="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;
}

Upvotes: 1

Stephen Zeng
Stephen Zeng

Reputation: 2818

If you follow bootstrap's documentation:

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

Upvotes: 51

ganders
ganders

Reputation: 7433

Here's how I did it, I had to override some css...

(Bootstrap 4 Beta 2)

Html

    <div class="input-group">
        <input type="search" class="form-control" placeholder="search..." />
        <span class="input-group-addon input-group-addon-btn bg-white">
            <button class="btn px-2" type="submit"><i class="fa fa-search" aria-hidden="true"></i></button>
        </span>
    </div>

And here's the css

#app-search .input-group-addon-btn {
    padding: 0;

    button {
        border: none;
        background: transparent;
        cursor: pointer;
        height: 100%;
    }
}

Upvotes: 0

frnt
frnt

Reputation: 8795

Try this,

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

Upvotes: 0

Luuk Skeur
Luuk Skeur

Reputation: 1940

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(); });

Upvotes: 3

Related Questions