Bootstrap inline text box and search button

Question

I have search input box, that I want styled with the bootstrap with the bootstrap form-control look. Problem is, I also want the search button on the same line as the search box. I thought this could be done with form-inline, but when I add class form-control to the search box, the search button gets pushed to the next line:

<div class="input-group" >
    <div class="form-inline">
      <input id="address" type="textbox" placeholder="City or Zipcode" class="form-control" >
      <input class="btn btn-sm btn-primary" type="button" value="Search" id="addressSearch">
    </div>
</div>

http://jsfiddle.net/TLEbG/

If I remove class="form-control" from the input textbox, the button is displayed in-line:

http://jsfiddle.net/ETs9M/

How can I keep the form-contol box styling, while keeping the button inline?

Answer 1

Try using input groups: https://getbootstrap.com/docs/4.4/components/input-group/ this puts the button next to the textfield and makes it one component