Question:

After getting some help with <a href="https://stackoverflow.com/questions/30738304/how-to-align-elements-in-a-bootstrap-form" title="alignment" rel="nofollow">alignment</a> of my controls, I'm now struggling to fully understand, exploit and adopt that solution.

The current state of affairs can be played with <a href="http://www.bootply.com/4DCKUvoroW#" rel="nofollow" title="here">here</a> and the code is below:

<pre class="snippet-code-html lang-html prettyprint-override"><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?

Updated

Addedd css to expand the form controls to expand with divs.

Is this what you want? <a href="http://www.bootply.com/y2K2OY8H1H" rel="nofollow">http://www.bootply.com/y2K2OY8H1H</a>

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>