Is it possible to add offset on the right using bootstrap 4?

Question

Using Bootstrap 4 layout system, can I align my button with the textbox?

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row justify-content-center mb-4">
  <div class="col col-4">
    <input type="text"/>
  </div>
  <div class="col col-4">
    <input type="text"/>
  </div>
</div>
<div class="row justify-content-center mb-4">
  <div class="col">
  <input type="button" class="btn" value="Go"/>
  </div>
</div>
  

I know I can keep everthing inside the same row and align the button under the textbox... but then I need to adjust the spacing between them using a new css class... I was looking for a cleaner solution using the existing bootsrap 4 classes.

Answer 1

If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line. - Bootstrap

Use a col-8 text-right for the the button's column.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row justify-content-center">
    <div class="col-4 ">
      <input type="text" class="form-control" />
    </div>
    <div class="col-4 ">
      <input type="text" class="form-control" />
    </div>
    <div class="col-8  text-right">
      <button type="button" class="btn btn-primary mt-4">Go</button>
    </div>
  </div>
</div>

Answer 2

It looks like you want space between the columns. You can shrink the width of (col-3) the input columns and use an offset on the 2nd column...

<div class="container-fluid">
    <div class="row justify-content-center mb-4">
        <div class="col-3">
            <input class="mx-auto form-control" type="text">
        </div>
        <div class="offset-1 col-3 text-center">
            <input class="mx-auto form-control" type="text">
        </div>
    </div>
    <div class="row justify-content-center mb-4">
        <div class="col-7 text-right">
            <input type="button" class="btn" value="Go">
        </div>
    </div>
</div>

https://www.codeply.com/go/S33dvwVZxv