How to remove outline in bootstrap 4

The theme you're using sets box-shadow to inset 0 -2px 0 #2196F3 on focus.

You need to override it, but not with none, because that would just remove it. You probably want it to remain at same value like when it's not focused. In short, you need this:

textarea:focus, 
textarea.form-control:focus, 
input.form-control:focus, 
input[type=text]:focus, 
input[type=password]:focus, 
input[type=email]:focus, 
input[type=number]:focus, 
[type=text].form-control:focus, 
[type=password].form-control:focus, 
[type=email].form-control:focus, 
[type=tel].form-control:focus, 
[contenteditable].form-control:focus {
  box-shadow: inset 0 -1px 0 #ddd;
}

Also note you need to load this CSS after Bootstrap CSS and the theme you're loading.


You can add the shadow-none Bootstrap class to remove the focus outline:

<div class="form-label-group">
  <input type="password" id="inputPassword" class="form-control shadow-none" placeholder="Password" required>
  <label for="inputPassword">Password</label>
</div>