How to remove the border when a button is clicked in Bootstrap

To remove the outline or border that appears when a button is clicked in Bootstrap, you can use custom CSS to override the default Bootstrap styles. You can set the outline property to none or 0 for the specific elements you want to modify. Here’s how you can do it:

/* Remove outline for buttons */
.btn:focus,
.btn:active {
    outline: none !important;
    box-shadow: none !important; /* Optionally remove box-shadow */
}

or there are built-in boostrap class shadow-none for disabling box-shadow (not outline)

<button class="btn btn-primary shadow-none"> Example button </button>

References:

Doc link for bootstrap 4: https://getbootstrap.com/docs/4.1/utilities/shadows/

Doc link for bootstrap 5: https://getbootstrap.com/docs/5.1/utilities/shadows/