Bootstrap 4 remove caret from dropdown button

Question

In Bootstrap 3 you could easily remove the "caret" (small arrow that points down) from a dropdown button, I can't see how to do it in Bootstrap 4 though because they no longer use <span class="caret"></span>.

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

question from:https://stackoverflow.com/questions/48176321/bootstrap-4-remove-caret-from-dropdown-button

Answer 1

Simply remove the dropdown-toggle!

Here is an example: https://jsfiddle.net/ydnosrLw/