How to put button next to input Twitter Bootstrap 4?

Question

How to place a button next to an input in Bootstrap. If I put some css or play with the bootstrap classes randomly I know I get this to work but I want to know a good way to do this. I don't want to merge the button to the text field like input-group-btn do. I want the normal bootstrap style for buttons.

<div>
    <input class="form-control" /> <button class="btn btn-primary">enter</button>
</div>

I get this:

|input                    | //occupies the full width
(button) //button comes to bottom

What I want:

|input                   | (button) //same "line".

Answer 1

Option 1 - form-inline class...

<div class="form-inline">
    <input class="form-control">
    <button class="btn btn-primary">enter</button>
</div>

Also, you can use mr-1 (margin-right) to add a small margin between the input and the button: https://www.codeply.com/go/5XCUJIEvua

Option 2 - table-cell class...

Another option (if you want the input and button to be full width) is to use d-table-cell class..

<div class="d-table-cell w-100">
    <input class="form-control">
</div>
 <div class="d-table-cell align-middle">
    <button class="btn btn-primary">enter</button>
</div>

Option 3 - d-flex class...

Finally, the easiest way may be to simply use d-flex which sets display:flex

<div class="d-flex">
        <input class="form-control mr-1">
        <button class="btn btn-primary">enter</button>
</div>

Demo of all 3 options:
https://www.codeply.com/go/5XCUJIEvua