input-prepend create two rows - html

Question

I'm trying to add two buttons on both sides of the search field, so I did this:
<div id="fixtures-filter">
<div class="input-group-btn">
<div class="input-group-prepend"><button type="button" class="btn btn-light" aria-expanded="false" id="countries-btn">Filters</button></div>
<div class="app-search">
<div class="input-group"><input type="text" class="form-control" placeholder="Search..."><span class="mdi mdi-magnify"></span>
<div class="input-group-append"><button type="button" class="btn btn-light" data-toggle="modal" data-target="#fixtures-filter-modal">Search</button> </div>
</div>
</div>
</div>
</div>
the result is really weird:
This is a JSFIDDLE.

Answer 1

Use an append and prepend. Adjust the borders as needed to make the search icon appear inside the input.
<div class="input-group">
<span class="input-group-prepend">
<button class="btn btn-primary" type="button">
Filters
</button>
</span>
<span class="input-group-prepend">
<div class="input-group-text bg-transparent border-right-0"><i class="fa fa-search"></i></div>
</span>
<input class="form-control py-2 border-left-0 border" type="search" value="..." id="example-search-input">
<span class="input-group-append">
<button class="btn btn-outline-secondary border-left-0 border" type="button">
Search
</button>
</span>
</div>
https://www.codeply.com/go/KJcZWvSsR9

Answer 2

If you are trying to get the filter to be on the same line, you have to move it inside the same parent div as the other inputs:
<div id="fixtures-filter">
<div class="input-group-btn">
<div class="app-search">
<div class="input-group">
<div class="input-group-prepend"><button type="button" class="btn btn-primary" aria-expanded="false" id="countries-btn"><span class="mdi mdi-magnify"></span></button></div>
<input type="text" class="form-control padleft" placeholder="Search...">
<span class="mdi mdi-magnify search-mg"></span>
<div class="input-group-append">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#fixtures-filter-modal">Search</button>
</div>
</div>
</div>
</div>
</div>
CSS added to get the magnifying glass icon to appear in the search input:
#fixtures-filter {
position: relative;
}
span.search-mg {
position: absolute;
z-index: 10;
font-size: 20px;
line-height: 38px;
left: 45px;
}
.padleft {
padding-left: 30px;
}
fiddle: http://jsfiddle.net/5xkbn3o0/