How to remove outline in bootstrap 4

Question

I want to remove textbox outline in bootstrap 4 but its not working. please let how can i remove this line.

CSS

Answer 1

As the accepted answer works it isn't the best option. You could simply override the input/button outline by editing the variables. (as the question specifically asks for bootstrap 4)

If you override the Bootstrap 4 variables like so. You could use the following code to disable all focus outlines:

$input-btn-focus-box-shadow: none;
$input-btn-focus-width: 0;

For only disabling the button focus outline use the follow code:

$btn-focus-box-shadow: none;

This you could also be done for indicators, select, dropdown etc. Just search the default variables list of bootstrap 4

---

EDIT

Also works for v5: Github variables

Even though you can disable the focus outline, it isn't a best practice. Conform the web accessibility keyboard standards a site should be useable by tabbing. By disabling the CSS you disable this functionality.

To separate these users there is a new pseudo class: :focus-visible which you can use however it's not compatible everywhere yet. Chromium changelog