Bootstrap button showing blue border?

Viewed 6269

I used a bootstrap template to add buttons to my site. After changing the colors of the buttons, I noticed that there is a slight blue outline on each of my buttons... I have been trying to find a way to remove this border but I'm not sure why it is there. Is there a way to remove this border?

enter image description here

2 Answers

With out seeing your code, I would suggest just applying this css to your btn class

.btn {
  border:none;
}

.btn should be used by every button styled with bootstrap

Use outline:none to remove btn border background

*.btn:active, .btn:focus, .btn:active:focus, .btn.active:focus {
        outline: none !important;
    }

   

*.btn:active, .btn:focus, .btn:active:focus, .btn.active:focus {
        outline: none !important;
    }





    .btn {
      margin:32px;
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  

<h1 class="text-center"> Remove Border Blue Lines from Bootstrap Button </h1>
<br>

   <center> <button type="button" class="btn btn-success">Button</button> </center>
    
  <br>  <br>  
   

Related