HTML & CSS - Differences in Formatting with IE

Question

I'm a complete novice when it comes to front end coding. I've made a simple design using Bootstrap 4 but some elements look completely different in IE than Chrome / Opera:

Chrome:

IE:

I've tried doing some research but I can't figure out what could be causing it. Here is the code for the search box and the card footer:

  <ul class="nav navbar-nav flex-fill w-100 justify-content-end">
            <li class="nav-item">
               <div class="input-group">
                  <div class="input-group-prepend">
                     <button type="button" class="btn btn-outline-primary" name="searchAll" onclick=" search_all()">Search</button>
                     <button type="button" class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="sr-only">Toggle Dropdown</span>
                     </button>
                     <div class="dropdown-menu">
                        <a class="dropdown-item" href="#" onclick="search_newest()">Newest</a>
                        <a class="dropdown-item" href="#" onclick="search_lowest()">Lowest Price</a>
                        <a class="dropdown-item" href="#" onclick="search_incOOS()">Include Out of Stock</a>
                        <div role="separator" class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#" onclick="search_premium()">Premium Sellers Only</a>
                     </div>
                  </div>
               <input type="text" class="form-control border-primary" id="searchbox" aria-label="Search for a product ...">
               </div>
            </li>
        </ul>

and the code for the Card footer:

<div class="card-footer text-muted">
                    <div class="row">
                        <div class="col-sm-6">
                            <h5 class="Product-Info" style="float:left; margin-top: 4px;">0.00</h5>
                            </div>
                            <div class="col-sm-6">
                                <h5 class="Product-Info-Stock" style="float:right;">
                                    <div class="box">
                                        <span><svg aria-hidden="true" style="width:20px;" focusable="false" data-prefix="far" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-circle fa-w-16 text-success mr-1"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200z" class=""></path></svg>
                                        </span>
                                        <span class="text-muted" style="margin-top: 5px;">0</span>
                                    </div>
                                </h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Does anyone have any tips on how I can make the layout work properly with IE11 too?

Thanks!