[FIXED] How to get rid of React-Bootstrap Dropdown Button box-shadow?

Issue

I am trying to get rid of the box shadow or second border on the bootstrap dropdown button when I click on it.

I couldn't find which class makes this change.

Solution

Buttons get appropriate ":focus" classes on focus, which add box shadows:

.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
}

To deactivate this behaviour, set "box-shadow" css property to "none". There is a utility bootstrap class called "shadow-none" which does the same: https://getbootstrap.com/docs/5.1/utilities/shadows/

Answered By - Igor Gonak

Answer Checked By - Mildred Charles (PHPFixing Admin)