Bootstrap 4 input group add-on between two inputs

Question

I'm trying to put an element between two input groups, then append two buttons at the end, but the alignment and sizing is completely off. This worked perfectly in Bootstrap v3.3.7 but since upgrading to Bootstrap v4.1 I can't get it to work.

Here is how it looked in v3.3.7 :

Here is my v3.3.7 code:

<div class="col-lg-10 text-right">
  <form role="form" class="form-inline" method="get">
    <div class="form-group" id="data_5">
      <div class="input-group my-2" id="datepicker">
        <input type="date" class="input-sm form-control" name="start_date" value="2019-01-03" max="2019-01-04">
        <span class="input-group-addon">to</span>
        <input type="date" class="input-sm form-control" name="end_date" value="2019-01-03" max="2019-01-04">
      </div>
    </div>
    <button class="btn mt-2 btn-sm btn-success" type="submit">Update</button>
    <button type="button" class="reset btn mt-2 btn-sm btn-primary" data-column="0" data-filter="">
      <i class="bootstrap-icon-white glyphicon glyphicon-filter"></i> Reset filters
    </button>
  </form>
</div>

Here is how it looks in v4.1 :

And here is my v4.1 code:

<div class="col-lg-10">
  <div class="float-right">
    <form role="form" class="form-inline" method="get">
      <div class="form-group" id="data_5">
        <div class="input-group my-2" id="datepicker">
          <input type="date" class="input-sm form-control" name="start_date" value="2019-01-03" max="2019-01-04">
          <span class="input-group-addon input-group-sm">to</span>
          <input type="date" class="input-sm form-control" name="end_date" value="2019-01-03" max="2019-01-04">
          <div class="input-group-append">
            <button class="btn mt-2 btn-sm btn-success" type="submit">Update</button>
            <button type="button" class="reset btn mt-2 btn-sm btn-primary" data-column="0" data-filter="">
              <i class="bootstrap-icon-white glyphicon glyphicon-filter"></i> Reset filters
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>

What am I doing wrong with my migration code?

Answer 1

This is the best port I can made to Bootstrap 4 . I will explain only the main changes:

1) For put an addon between two inputs use:

<input class="form-control">
<div class="input-group-prepend input-group-append">
  <span class="input-group-text">to</span>
</div>
<input class="form-control">

2) Glyphicons don't come with Bootstrap 4, so I used font-awesome instead.

3) I replace mt-2 classes on buttons with ml-2 classes.

The rest of the details can be checked on next example:

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <div class="container-fluid"> <div class="row"> <!-- Porting begin --> <div class="col-lg-10"> <form role="form" class="form-inline" method="get"> <div class="form-group" id="data_5"> <div class="input-group input-group-sm my-2" id="datepicker"> <input type="date" class="form-control" name="start_date" value="2019-01-03" max="2019-01-04"> <div class="input-group-prepend input-group-append"> <span class="input-group-text">to</span> </div> <input type="date" class="form-control" name="end_date" value="2019-01-03" max="2019-01-04"> </div> </div> <button class="btn btn-sm btn-success ml-2" type="submit">Update</button> <button type="button" class="reset btn btn-sm btn-primary ml-2" data-column="0" data-filter=""> <i class="fas fa-filter"></i> Reset filters </button> </form> </div> <!-- Porting end --> </div> </div> 

Also, if you want to justify all element to the right of the column that wraps the form, then use:

<div class="col-lg-10 d-flex justify-content-end">

in replacement of:

<div class="col-lg-10">