Bootstrap 4 remove caret from dropdown button

It's done in css. Do something like that:

.dropdown-toggle:after { content: none }

You can remove the caret in Bootstrap 4 by removing the dropdown-toggle class from your element. So instead of this:

<button class="btn btn-outline-secondary dropdown-toggle" ...>

Your button will be

<button class="btn btn-outline-secondary" ...>

This won't have any side affects and it will still function properly as a dropdown.


Simply remove the dropdown-toggle!

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


In Bootstrap 4 you can remove caret form dropdown button by setting $enable-caret sass variable false. But you must set this variable before importing the bootstrap sass file.

// Your variable overrides
$enable-caret: false

// Bootstrap and its default variables
@import "node_modules/bootstrap/scss/bootstrap";