CODEWITHSUNDEEP
formstwitter-bootstrapprogress-bar
Jojo595
Jojo595

Reputation: 65

Bootstrap - Progress bars in form-control

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%;

Screenshot

Code(html):

<div class="input-group">
    <span class="input-group-addon"><span class="fa fa-lock fa-fw"></span></span>
    <input id="pass" type="password" name="password" data-toggle="tooltip" data-placement="top" class="form-control" placeholder="Password">
    <div class="progress-bar form-control">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
    </div>
</div>

Upvotes: 2

Views: 3227

Answers (1)

tao
tao

Reputation: 90103

It's quite simple: you don't put a .progress-bar inside a .form-control.

You need to pay more attention to Bootstrap markup. (Or to the CSS behind it.)

First of all, you shouldn't put anything else inside .input-groups, other than one single <input> with the class of .form-control and .input-group-addons before or after the input. 

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

If you want to place a progress bar, again, you need to pay attention to the Bootstrap markup. You have wrap it in a .progress wrapper:

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

You could combine the two and keep them together by wrapping them in a .form-group. So your initial markup should be replaced by:

<div class="form-group">
  <div class="input-group">
    <span class="input-group-addon"><span class="fa fa-lock fa-fw"></span></span>
    <input id="pass" type="password" name="password" data-toggle="tooltip" data-placement="top" class="form-control" placeholder="Password">
  </div>
  <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
      <span class="sr-only">Password security 0%</span>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions