Combining the Select and Input box in a row with Boostrap - css

Question

How can I combine all the form group items such as Select, Input items together just using bootstrap framework?
I have tried the below way but as expected I am getting the space between Select and Input Box
DEMO

Answer 1

The problem is your declaration of mx-sm-3. This applies for the -sm breakpoint and greater if there is no other declaration. The simplest way to correct this is add a reset at the larger breakpoint: mx-md-0:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="form-inline">
<div class="form-group">
<select class="custom-select mx-md-0">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div class="form-group mx-sm-3 mx-md-0">
<input class="form-control" type="text">
</div>
<div class="form-group mx-sm-3 mx-md-0">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
Expand the above code snippet to see how it will render when you exceed the -sm breakpoint. I also changed your <select> to make use of the custom-select class.

Answer 2

I'm not sure if this is what you're after, but if it's not, clarify what you're after a little more and I might be able to help.
If you're just wanting to group the items together, bootstrap has a card class that allows you to group elements into a container of sorts. The code below is wrapped in bootstraps grid system. I've put your code into a div tag with a card class. In a second example, I've removed a the inline form class, so you can see how the inputs are stacked vertically.
<div class="container mt-5">
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<div class="form-inline">
<div class="form-group mx-sm-3 mb-2">
<select class="form-control form-control-sm">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div class="form-group mx-sm-3 mb-2">
<input class="form-control" type="text">
</div>
<div class="form-group mx-sm-3 mb-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card">
<div class="card-body">
<div class="form">
<div class="form-group mx-sm-3 mb-2">
<select class="form-control form-control-sm">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</div>
<div class="form-group mx-sm-3 mb-2">
<input class="form-control" type="text">
</div>
<div class="form-group mx-sm-3 mb-2">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here's a codeply project so you can see how the layout.