How to remove outline in bootstrap 4

Question

I want to remove textbox outline in bootstrap 4 but its not working. How can I remove this line?

CSS

#content #main-content input[type=text]{    border: 0;    border: 1px solid #ccc;    height: 40px;    padding-left: 10px;    outline: 0;  } 

html

<div class="form-group">    <label for="title">Title <span>*</span></label>    <input type="text" class="form-control" id="title" name="title" placeholder="Enter Title"> </div> 

Answer 1

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> 

Answer 2

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.