How to remove the arrow in dropdown in Bootstrap 4?

Question

I am using Bootstrap 4. I tried to remove the arrow in dropdown.

The answers I found for Bootstrap 3 do not work any more.

The jsfiddle is here.

Answer 1

I was using the accepted answer for quite a while in my project but just now stumbled across a variable used by bootstrap:

$enable-caret: true !default;

If you set this to false then the caret will be removed without having to do any custom code.

My project was Ruby/Rails so I was using the bootstrap-rubygem. I changed the variable by importing a custom-variables.scss with the above variable set to false in my application.scss BEFORE the bootstrap.scss file/files.