21380

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

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?

Answer1:

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>

Recommend

  • What is missing in my nsIContentPolicy Firefox/IceWeasel extension XPCOMponent implementation for th
  • Ember.js how to extend ember-cli-addon component
  • “You do not have permission to call showModalDialog”
  • Directive not called on input change
  • adding sendgrid addon to my heroku django app
  • Unable to access codeigniter controller in Live Server but accessible in localhost (xampp on windows
  • Using FileWriter and BufferedWriter clearing file for some reason?
  • xdebug running in PHPStorm unable to connect to remote server
  • Axios not working on Android after Phonegap Build
  • Is there a client+server-side MVC JS framework
  • Promise resolve not called because popup closes too fast
  • Trigger FireFox extensions from a custom button
  • Save mail with subject as filename
  • Chart is rendered in Chrome, but not in FF and IE
  • how to remove unused javascript functions, variables, and elements [closed]
  • Wix Managed Bootstrapper: Installing Net framework and adding entry in add-remove program even if we
  • Javascript onclick does not fire when developer tools are open
  • Create unique ids for a group
  • Finding regular expressions for languages otherwise described
  • css Star-rating html
  • Delphi. Analog of Memo/RichEdit
  • JSON Error when parsing “… has no method 'replace'”
  • How to align an image side by side with a heading element?
  • Is it possible to get the word under the mouse cursor in a ``?
  • Why value captured by reference in lambda is broken? [duplicate]
  • Insert into database using onclick function
  • How to add a column to a Pandas dataframe made of arrays of the n-preceding values of another column
  • what is the difference between the asp.net mvc application and asp.net web application
  • Web-crawler for facebook in python
  • Unanticipated behavior
  • Matrix multiplication with MKL
  • Unit Testing MVC Web Application in Visual Studio and Problem with QTAgent
  • json Serialization in asp
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Why joiner is not used after Sequence generator or Update statergy
  • embed rChart in Markdown
  • How to stop GridView from loading again when I press back button?
  • Recursive/Hierarchical Query Using Postgres
  • Binding checkboxes to object values in AngularJs
  • UserPrincipal.Current returns apppool on IIS