title: Bootstrap button outline and after clicking outline
body: <p><a href="https://i.stack.imgur.com/A78vB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A78vB.png" alt="Border outline around the button" /></a></p>
  <p>Hello,
  I am trying to finish the border around the button of btn-primary and after click it shows light blue border adjusting outline:0 but it is useless. How can I remove the border from this button.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6&quot; crossorigin=&quot;anonymous&quot;&gt;
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
    &lt;title&gt;Document&lt;/title&gt;
  
    &lt;style&gt;
      * {
        box-sizing: border-box;
      }
      
      .container {
        max-width: 520px;
        max-height: 180px;
        background-color: antiquewhite;
      }
      
      fieldset {
        max-width: 518px;
        max-height: 178px;
        padding-right: 15px;
        padding-left: 15px;
      }
      .btn{
          font-weight:600;
          color:#fff;
          text-align:center;
          vertical-align:middle;
          border:1px solid transparent;
          font-size:1.2rem;
          line-height:1.5;
      }
      .btn-primary {
    color: #fff;
    background-color: #1172f4;
    border-color: #000000;
  }
  .btn-primary: hover {
    color: #fff;
    background-color:#1172f4;
    border-color: black;
  }
  .btn-primary: focus, .btn-primary. Focus {
    color: #fff;
    background-color:#1172f4;
    border-color: #1875f6;
    box-shadow: 0 0 0 0.2rem rgba(38, 38, 38, 0.5);
  }
  
  .btn: focus, .btn. Focus {
    outline: 0;
  
  }
  button: focus{
      outline:0;
  }
  
  
  
      /*.form-group{
          max-width:518px;
          
      }*/
    &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;div class=&quot;row&quot;&gt;
  
        &lt;div class=&quot;col-sm-6 col-sm-offset-3 form-box&quot;&gt;
  
          &lt;form role=&quot;form&quot; action method=&quot;post&quot; class=&quot;registration-form&quot; style=&quot;width:482px;height:175px;background-color:aqua;margin-left:5px;margin-right:5px;padding-left: 20px;padding-right: 20px;&quot;&gt;
  
            &lt;fieldset&gt;
              &lt;!--Start 2nd form field set--&gt;
              &lt;div class=&quot;form-bottom&quot;&gt;
                &lt;div class=&quot;form-group&quot; style=&quot;margin-top:20px;width:100%;&quot;&gt;
  
                  &lt;input type=&quot;text&quot; name=&quot;form-email&quot; placeholder=&quot;Enter Your email&quot; class=&quot;form-email form-control&quot; id=&quot;form-email&quot;&gt;
                &lt;/div&gt;
                &lt;!--End of 2nd form groupdiv--&gt;
  
                &lt;button type=&quot;button&quot; class=&quot;btn btn-primary btn-next&quot; style=&quot;margin-top:20px;margin-bottom:20px;padding-right:15px;width:100%;&quot;&gt;Get Started&lt;/button&gt;
              &lt;/div&gt;
              &lt;!--End of bottom div--&gt;
  
            &lt;/fieldset&gt;
            &lt;!--End of second form fieldset--&gt;
          &lt;/form&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>My container and elements are also not showing the responsive behavior. Please help me to fix both issues. Which property in bootstrap btn-primary button handle these both borders.</p>