Bdtjtk

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

Here is how it looked in 3.3.7:

Here is my 3.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 4.1:

Here is my 4.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 code migration?

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">