title: Eye in password field does not appear using bootstrap 5
body: <p>When using Bootstrap v5 and FontAwesome v5, I cannot get get the eyeball to appear to the right side of the form. Instead, it pulls the password field further to the right than the username field and the eye does not show.</p>
  <pre><code>&lt;div class=&quot;input-group mb-3&quot;&gt;
     &lt;span class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;fas fa-lock&quot;&gt;&lt;/i&gt;&lt;/span&gt;
     &lt;input class=&quot;form-control&quot; id=&quot;username&quot; name=&quot;username&quot; placeholder=&quot;Username&quot; value=&quot;&quot;&gt;
  &lt;/div&gt;
  
  &lt;div class=&quot;input-group mb-3&quot;&gt;
     &lt;span class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;fas fa-lock&quot;&gt;&lt;/i&gt;&lt;/span&gt;
     &lt;input class=&quot;form-control&quot; id=&quot;password&quot; name=&quot;password&quot; placeholder=&quot;Password&quot; value=&quot;&quot;&gt;
     &lt;span class=&quot;input-group-text&quot;&gt;&lt;i class=&quot;far fa-eye-slash&quot; id=&quot;togglePassword&quot;&gt;&lt;/i&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Javascript</p>
  <pre><code>const togglePassword = document.querySelector(&quot;#togglePassword&quot;);
  const password = document.querySelector(&quot;#password&quot;);
  
  togglePassword.addEventListener(&quot;click&quot;, function () {
     
  // toggle the type attribute
  const type = password.getAttribute(&quot;type&quot;) === &quot;password&quot; ? &quot;text&quot; : &quot;password&quot;;
  password.setAttribute(&quot;type&quot;, type);
  
  // toggle the eye icon
  this.classList.toggle('fa-eye');
  });
  </code></pre>