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.
<div class="dropdown open">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
</div>
Simply remove "dropdown-toggle" class from the element. The dropdown will still work if you have the data-toggle attribute as follows
<button role="button" type="button" class="btn" data-toggle="dropdown">
Dropdown Without Arrow
</button>
overriding .dropdown-toggle class styles affects all dropdowns and you may want to keep the arrow in other buttons, that's why this looks to me the simplest solution.
Edit: Keep dropdown class if you want to keep border styling
<button role="button" type="button" class="btn dropdown" data-toggle="dropdown">
Dropdown Without Arrow
</button>