title: Bootstrap - Progress bars in form-control
body: <p>i have a question, how can i put a bootstrap progress bar into a form control? I'm trying to do a password strength indicator with a progress bar, but when i put the progressbar into the form control it always shows as full, even though the value of the bar is 0%;</p>
  
  <p><a href="https://i.stack.imgur.com/7c31B.png" rel="nofollow noreferrer">Screenshot</a></p>
  
  <p>Code(html):</p>
  
  <pre><code>&lt;div class="input-group"&gt;
      &lt;span class="input-group-addon"&gt;&lt;span class="fa fa-lock fa-fw"&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;input id="pass" type="password" name="password" data-toggle="tooltip" data-placement="top" class="form-control" placeholder="Password"&gt;
      &lt;div class="progress-bar form-control"&gt;
          &lt;div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>