Menu
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> 
553
Every Bootstrap dropdown button or link has an ::after selector in CSS. ::after selector is often used to insert some text after the content of the element. In this case, the content is a dropdown arrow. To remove it, just make the content go 'none'.
In Bootstrap 4, you can remove the dropdown arrow which is called caret by declaring a $enable-caret SASS variable and setting it to false : $enable-caret: false; This overrides the default value of true set in the Bootstrap's _variable.
You can hide the dropdown arrow from the DropDownButton by adding class e-caret-hide to DropDownButton element using cssClass property.
Answer: Use the jQuery hover() method By default, to open or display the dropdown menu in Bootstrap you have to click on the trigger element. However, if you want to show the dropdown on mouseover instead of click you can do it with little customization using the CSS and jQuery.
Simply remove the dropdown-toggle!
Here is an example: https://jsfiddle.net/ydnosrLw/
110
It's done in css. Do something like that:
.dropdown-toggle:after { content: none } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
