bootstrap button shows blue outline when clicked

I added this but still the blue outline appear when the button is clicked.

.btn:focus {
  outline: none;
}

how to remove that ugly thingy?

Solution 1:

May be your properties are getting overridden. Try attaching !important to your code along with the :active .

.btn:focus,.btn:active {
   outline: none !important;
   box-shadow: none;
}

Also add box-shadow because otherwise you will still see the shadow around button.

Although this isn't a good practise to use !important I suggest you use more specific class and then try applying the css with the use of !important...

Solution 2:

There are built-in boostrap class shadow-none for disabling box-shadow (not outline) (https://getbootstrap.com/docs/4.1/utilities/shadows/). This removes shadow of button:

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

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

Solution 3:

In the latest version of Bootstrap, I found removing outline itself doesn't work. And I have to add this because there is also a box-shadow:

.btn:focus, .btn:active {
  outline: none !important;
  box-shadow: none !important;
}

Solution 4:

Try Below Code

.button:active, 
 button:active,
.button:focus, 
 button:focus,
.button:hover, 
 button:hover{
    border:none !important;
    outline:none !important;
}