Add possibility to hide Dropdown Toggle Caret

I recently stumbled across the problem that there is no “out-of-the-box” way to hide the dropdown toggles caret which gets added by default.

This would be handy for situations like this where you want to provide additional actions behind a “…”-button: https://codepen.io/jackmu95/pen/jLeRdM

A good and easy solution for me would be to add a dropdown-toggle-no-caret class to the dropdown toggle:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle dropdown-toggle-no-caret" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    ...
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>
</div>

// scss/_dropdown.scss

.dropdown-toggle:not(.dropdown-toggle-no-caret) {
  ...
}

.dropup {
  ...

  .dropdown-toggle:not(.dropdown-toggle-no-caret) {
    ...
  }
}

[fafournier]

Just for information and to eventually weigh in, removing .dropdown-toggle in a .btn-group makes corner rounding issues.

Using the example from https://getbootstrap.com/docs/4.0/components/button-group/ but without ‘dropdown-toggle’

<div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <div class="btn-group" role="group"> <button id="btnGroupDrop1" type="button" class="btn btn-secondary" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button> <div class="dropdown-menu" aria-labelledby="btnGroupDrop1"> Dropdown link Dropdown link </div> </div> </div>

[DaleyKD]

This would be a nice thing to have. A simple extra CSS class would be cool.