Search code examples
bootstrap-4react-bootstrapbootstrap-5

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


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.

Screenshot of bootstrap dropdown button


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/