Why isn't my slider shown?
After getting some help with the alignment of my controls, I am now struggling to fully understand, use, and accept this decision.
The current state of affairs can be reproduced using here and the code 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: Inside the line is there col-lg-8
that contains two divs col-lg-4
. As I understood the document, the input controls should take up the full width of their containers, but the group of forms inside is col-lg-4
significantly smaller than its container.
How can this layout be fixed so that divs with assigned classes col-lg-
use the available space?
source to share
Update
Added css to extend form controls to expand with div.
Is this what you want? http://www.bootply.com/y2K2OY8H1H
You had a row with column 8 with two columns of 4 inside. Thus, col-8 fills in 8 of the 12 main columns. Then 2 col-4 inside this only fill 8 of 12 inside col-8. So every time you insert col you create nested columns. It's 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>
source to share