Twitter-Bootstrap input inline widths (firstname, middlename and lastname)

16,645
<div class="control-group">
  <label class="control-label" for="FirstName">Name</label>
    <div class="controls row-fluid">
        <div class="span2 row"><input class="span12" id="FirstName" name="FirstName" placeholder="Firstname" type="text" value="" /></div>
        <div class="span2 row"><input class="span12" id="MiddleName" name="MiddleName" placeholder="Middlename" type="text" value="" /></div>
        <div class="span2 row"><input class="span12" id="LastName" name="LastName" placeholder="Lastname" type="text" value="" /></div>
        <p class="help-block span12 row" style="color: red;">How do I make these 3 input's (together) equal width of the "Adresse" input.</p>
    </div>
</div>
<div class="control-group">
  <label class="control-label" for="AddressLine1">Adresse</label>
  <div class="controls row-fluid">
    <div class="span6 row"><input class="span12" id="AddressLine1" name="AddressLine1" placeholder="AddressLine1" type="text" value="" /></div>
  </div>
</div>

http://jsfiddle.net/baptme/RXGKN/2/

Share:
16,645
Carsten Petersen
Author by

Carsten Petersen

Updated on June 07, 2022

Comments

  • Carsten Petersen
    Carsten Petersen almost 2 years

    I've been scratching my head for some time now regarding Twitter-Bootstrap input width / CSS classes. I have a form with client address information. I would like to make "Name" (First name, middle name and last name) and inline form/row, where the three input's result in equal width of the rest of the inputs (using class="input-xxlarge").

    When i use the "input-*" (ex. "input-small") on each input, they are either too wide, or too narrow (in total).

    <div class="control-group">
        <label class="control-label" for="FirstName">Name</label>
        <div class="controls">
            <input class="input-small" id="FirstName" name="FirstName" placeholder="First name" type="text" value="" />
            <input class="input-small" id="MiddleName" name="MiddleName" placeholder="Middle name" type="text" value="" />
            <input class="input-small" id="LastName" name="LastName" placeholder="Last name" type="text" value="" />
        </div>
    </div>
    

    http://jsfiddle.net/RXGKN/

    Setting a percent width (inline) isn't the solution either. Is there anyone who has been able to do this, so both left and right side fits "perfect" with the rest of the inputs (incl. responsive)?

    Is there any way to define a "row" which equals the width of "input-xxlarge", and use spanX (ex. span4) on each input in a "control-group" > "controls".