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".
<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/
Related
This may seem like I'm missing something super simple, but I cannot for the sake of me figure this out.
I have a <form> wrapped inside a <div class="form">, and for some reason, in the browser, the form, and the div, have a height of 0, and all the content is overflow. When I inspect the document from the browser, the browser does not recognize this div or form.
Here's the problem area here:
Also, you can inspect it at this website here: Web page
<div class="form">
<form>
<div class="contact">
<label for="first">First Name:</label>
<input id="first" type="text" placeholder="First Name"><br>
<label for="last">Last Name:</label>
<input id="last" type="text" placeholder="Last Name"><br>
<label for="tel">Phone Number:</label>
<input id="tel" type="tel" placeholder="(###) ###-####"><br>
<label for="email">Email:</label>
<input id="email" type="email">
</div>
<div class="address">
<label for="address-1">Address</label>
<input id="address-1" type="text" placeholder="Address Line 1"><br>
<label for="address-2">Address, Line 2</label>
<input id="address-2" type="text" placeholder="Address Line 2"><br>
<label for="city">City:</label>
<input id="city" type="text" placeholder="City"><br>
<label for="state">State:</label>
<select id="state">
<optgroup>
</optgroup>
</select></br>
<label for="zip">Zip Code:</label>
<input id="zip" type="text" placeholder="01234">
</div>
</form>
</div>
Does you talk about that the div and form have height:0 and the content overflow?
If so, it is because the content divs have float css attributes. to fi it, you have to add at the end of the contents div with style clear:both
<div class="form">
<form>
<div class="contact">
...
</div>
<div class="address">
...
</div>
<div style="clear:both"></div>
</form>
</div>
could anyone please help in getting the below layout using HTML5 and bootstrap.
i want the Name label always on left and the Formatted checkbox always on right and the three textboxes share the remaining space evenly.click here for required layout
Code I tried
<form class="form-inline">
<div class="form-group">
<label for="FirstName">Name:</label>
<input type="text" class="form-control inputText" id="txtFirstName" placeholder="First Name" name="txtFirstName">
</div>
<div class="form-group">
<label for="MiddleName" class="sr-only">Middle Name:</label>
<input type="text" class="form-control inputText" id="txtMiddleName" placeholder="Middle Name" name="txtMiddleName">
</div>
<div class="form-group">
<label for="LastName" class="sr-only">Last Name:</label>
<input type="text" class="form-control inputText" id="txtLastName" placeholder="Last Name" name="txtLastName">
</div>
<div class="checkbox">
<label><input type="checkbox"/>Formatted</label>
</div>
</form>
There are many ways to do this but I would suggest you look at this bootstrap page https://v4-alpha.getbootstrap.com/components/forms/
I'm trying to create a form in Bootstrap and need the first name and last name fields to be inline where as the rest of the form needs to be as it is.
I got the inline functionality to work. However, the inline text fields (names) are not aligning properly.
In the image above, I need the combined width of the name fields to be same as Phone, Email and Password fields, which is not happening. The question is how to get that alignment to work?
The code for the form is below:
<form role="form" class="register-form cf-style-1">
<div class="control-group" style="display:inline-block !important; margin-bottom: 25px;">
<label class="control-label">First Name</label>
<div class="controls">
<input type="text" class="le-input" placeholder="First Name" required>
</div>
</div>
<div class="control-group" style="display:inline-block !important; margin-bottom: 25px;">
<label class="control-label">Last Name</label>
<div class="controls">
<input type="text" class="le-input" placeholder="Last Name" required>
</div>
</div>
<div class="field-row">
<label>Phone</label>
<div class="input-group">
<div class="input-group-addon">+91</div>
<input type="text" class="le-input" maxlength="10" placeholder="Phone Number">
</div>
</div>
<div class="field-row">
<label>Email</label>
<input type="email" class="le-input" placeholder="Email Address" required>
</div><!-- /.field-row -->
<div class="field-row">
<label>Password</label>
<input type="password" class="le-input" placeholder="Password" required>
</div><!-- /.field-row -->
<div class="buttons-holder">
<button type="submit" class="le-button huge">Sign Up</button>
</div><!-- /.buttons-holder -->
</form>
You should be able to remove the style of the inline-block. Then just add the class col-md-6 to each of the divs you want to be side by side. This will cause them to be a two column layout for medium displays then they will be on their own line on smaller displays. You can read more about columns here:
http://getbootstrap.com/css/#grid
Not sure what css you have to go along with this, might be useful if we can see a link to this.
But you could try adding width: 50% to the First and Last name input tags.
input {width: 50%;}
I would target these inputs by adding classes to the ones you want to change, as not to affect the other input tags
<div class="control-group">
<div class="controls form-inline">
<label for="inputKey">First Name</label>
<input type="text" class="le-input" placeholder="First Name" required>
<label for="inputValue">LastName</label>
<input type="text" class="le-input" placeholder="Last Name" required>
</div>
</div>
I would like to have input boxes as:
but getting:
Is there any way i can remove the extra whitespace in between and get desired output without using css margins. My codes is as follows:
<div class="row">
<div class="col-md-2 employerEin">
<input type="text" name="employerEIN1" maxlength="2" size="2" value=""
class="form-control" id="employerEIN1" title="EIN">
</div>
<span class="col-md-1 employerEin">-</span>
<div class="col-md-3">
<input type="text" name="employerEIN2" maxlength="7" size="7" value=""
class="form-control" id="employerEIN2" title="EIN">
</div>
</div>
Just add the .form-inline class to your <form>
<div class="row">
<form class="form-inline">
<div class="form-group">
<input type="text" name="employerEIN1" maxlength="2" size="2" value="" class="form-control" id="employerEIN1" title="EIN">
-
<input type="text" name="employerEIN2" maxlength="7" size="7" value="" class="form-control" id="employerEIN2" title="EIN">
</div>
</form>
</div>
EDIT: Added additional code due to OP's comment
Just add the .form-inline class to the enclosing div to make those two fields behave inline, then continue adding other fields as necessary
<div class="row">
<!-- add the .form-inline class to the enclosing div -->
<div class="form-group form-inline">
<input type="text" name="employerEIN1" maxlength="2" size="2" value="" class="form-control" id="employerEIN1" title="EIN">
-
<input type="text" name="employerEIN2" maxlength="7" size="7" value="" class="form-control" id="employerEIN2" title="EIN">
</div>
<!-- add other form elements as needed -->
<div class="form-group">
<input type="text" name="field3" maxlength="2" value="" class="form-control">
</div>
<div class="form-group">
<input type="text" name="field4" maxlength="7" value="" class="form-control">
</div>
</div>
I am using Twitter Bootstrap. In the forms I can do horizontal layouts and vertical layouts but the class is on the <form> tag. So, how to I do a little of both where I want to save space and put a couple of input boxes horizontally and the rest vertically?
I have a form that looks like this:
Address [__________________]
City [___________]
State [__]
Zip [_____]
Country [____]
But I want it to look something like this:
Address [__________________]
City [___________]
State [__] Zip [_____] Country [____]
Please help with the CSS.
Here is my code:
<form class="form-horizontal">
<fieldset>
<div class="row-fluid">
<div class="span6">
<div class="control-group">
<label class="control-label" for="Address">Mailing Address</label>
<div class="controls">
<input data-val="true" data-val-required="Required" id="mailing" name="Address" type="text" value="1313 Mockingbird Lane" class="valid">
</div>
</div>
<div class="control-group">
<label class="control-label" for="City">City</label>
<div class="controls">
<input class="span3 valid" id="city" name="City" type="text" value="Kaysville">
</div>
</div>
<div class="control-group">
<label class="control-label" for="State">State</label>
<div class="controls">
<input class="span2" id="state" name="State" type="text" value="UT">
</div>
</div>
<div class="control-group">
<label class="control-label" for="PostalCode">Zip</label>
<div class="controls">
<input class="span2" id="postalCode" name="PostalCode" type="text" value="12345">
</div>
</div>
<div class="control-group">
<label class="control-label" for="Country">Country</label>
<div class="controls">
<input class="span3" id="country" name="Country" type="text" value="US">
</div>
</div>
</div>
</div>
</fieldset>
</form>
This worked for me
<div class="control-group">
<label class="control-label" for="inputPLZ">PLZ*</label>
<div class="controls">
<input type="text" class="input-mini" id="inputPLZ">
Ort*
<input type="text" class="input-medium" id="inputOrt">
</div>
</div>
It is rendered like this
Wrap state, zip and country in a div, then float the child elements left and they should align. Though I have no experience with Bootstrap so don't know if that will affect anything
Helps to understand how bootstrap is set up.
The .control-label class is the left side indicator of a form. This takes the left 140px of the form and floats left. The .controls class is the right side of container of a form, and simply applies a margin left of 160px to itself without floating.
Knowing this, you can treat Bootstrap like normal HTML. You can simply include all the inputs in the same control, like so:
<div class="control-group">
<div class="controls">
State: <input class="span2" id="state" name="State" type="text" value="UT">
Zip: <input class="span2" id="postalCode" name="PostalCode" type="text" value="12345">
Country: <input class="span3" id="country" name="Country" type="text" value="US">
</div>
</div>
If you want the alignment to match up, use a little bit of trickery by making the first label in your horizontal set the .control-label like so:
<div class="control-group">
<label class="control-label">State:</label>
<div class="controls">
<input class="span2" id="state" name="State" type="text" value="UT">