Question

I have a website build on Twitter Bootstrap.

When building a 2 column form, I am trying to use the input-prepend class to add an email icon to the left of a form input. I want the input field along with the prepend icon to always be 100% of the container.

Here’s my code:

                      <div class='row-fluid'>
                        <div class='span6'>
                          <div class='control-group' id='contactEmailControlGroup'>
                            <label for='contactEmail'>Email Address</label>
                              <div class='input-prepend'> <span class='add-on'><i class='icon-envelope'></i></span>
                                <input type='email' name='contactEmail' id='contactEmail' class='span11' placeholder='Your email address...' tabindex='3' required/>
                                <span class='help-inline formAlert' id='contactEmailError'> <i class='icon-edit formAlertIcon'></i> Please enter your email address </span> <span class='help-inline formAlert' id='contactEmailInvalidError'> <i class='icon-exclamation-sign formAlertIcon'></i> Invalid email address </span>
                            </div>
                          </div>
                        </div>
                        <div class='span6'>
                          <div class='control-group'>
                            <label for='contactPhone'>Phone Number</label>
                            <input type='tel' name='contactPhone' id='contactPhone' class='span12' placeholder='Your phone number...' tabindex='4' required/>
                            <span class='help-inline formAlert' id='contactPhoneError'> <i class='icon-edit formAlertIcon'></i> Please enter your phone number </span> <span class='help-inline formAlert' id='contactPhoneInvalidError'> <i class='icon-exclamation-sign formAlertIcon'></i> Invalid phone number </span> </div>
                        </div>
                      </div>

When using this code, the form looks like this screenshot:

But when I resize the browser to simulate a smaller screen, the width of the field with the add-on prepended is sized incorrectly, as seen here:

QUESTION

• Is there a different way this form should be coded so that the input field & icon are 100% and match the other fields?
• Or What CSS do I need to change in Bootstrap to change this?

Answer 1

Turns out this is a known issue and will be addressed in version 3. [SOURCE]