Why aren't my col-lg- shown full width? - html

Question

After getting some help with alignment of my controls, I'm now struggling to fully understand, exploit and adopt that solution.
The current state of affairs can be played with here and the code is below:
<div class="row">
<div class="col-lg-8">
<div class="form-inline col-lg-4">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="fa fa-key fa-fw"></span></div>
<input id="oldpswd" name="oldpswd" placeholder="Altes Passwort" type="password" class="form-control">
</div>
</div>
</div>
<span id="oldpswd_errmsg" class="bg-danger col-lg-4">xxxx</span>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<div class="form-inline col-lg-4">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="fa fa-key fa-fw"></span></div>
<input id="oldpswd" name="newpswd" placeholder="Neues Passwort" type="password" class="form-control">
</div>
</div>
</div>
<span id="newpswd_errmsg" class="bg-danger col-lg-4">xxxx</span>
</div>
</div>
<div class="row">
<div class="col-lg-8">
<div class="form-inline col-lg-4">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="fa fa-key fa-fw"></span></div>
<input id="reppswd" name="reppswd" placeholder="Passwort wiederholen" type="password" class="form-control">
</div>
</div>
</div>
<span id="reppswd_errmsg" class="bg-danger col-lg-4">xxxx</span>
</div>
</div>
Question: within the row there is a col-lg-8 that contains two col-lg-4 divs. As I understood the doc, the input-controls are supposed to take up the entire width of their containers, yet the form-group inside the col-lg-4 is significantly smaller than its container.
How can this layout be fixed so that the divs with designated col-lg- classes use the available space?

Answer 1

Updated
Addedd css to expand the form controls to expand with divs.
Is this what you want? http://www.bootply.com/y2K2OY8H1H
You had a row, with a column of 8, with two columns of 4 inside that. So the col-8 fills 8 of the 12 main columns. Then the 2 col-4 inside of that only fill 8 of the 12 inside that col-8. So each time you nest the col's you create nested columns. It is a little confusing, but makes sense.
NEW CSS:
.form-group {
width:100%;
}
.input-group {
width:100%;
}
-
<div class="row">
<div class="col-md-2">
<div class="form-inline">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="fa fa-key fa-fw"></span></div>
<input id="oldpswd" name="oldpswd" placeholder="Altes Passwort" type="password" class="form-control">
</div>
</div>
</div>
</div>
<span id="oldpswd_errmsg" class="bg-danger col-lg-3">xxxx</span>
</div>
<div class="row">
<div class="col-md-2">
<div class="form-inline">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="fa fa-key fa-fw"></span></div>
<input id="oldpswd" name="newpswd" placeholder="Neues Passwort" type="password" class="form-control">
</div></div>
</div>
</div>
<span id="newpswd_errmsg" class="bg-danger col-lg-3">xxxx</span>
</div>
<div class="row">
<div class="col-md-2">
<div class="form-inline">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="fa fa-key fa-fw"></span></div>
<input id="reppswd" name="reppswd" placeholder="Passwort wiederholen" type="password" class="form-control">
</div></div>
</div>
</div>
<span id="reppswd_errmsg" class="bg-danger col-lg-3">xxxx</span>
</div>