I'm trying to create a form with form elements side by side, and their labels (aligned with the beginning of the respective input element) on top of them, like so:
Label Label2
+----------------+ +-------+
+----------------+ +-------+
The following doesn't work as expected, because "Label2" is slightly unaligned with the input element:
<div class="controls controls-row">
<label class="span9"><span>Label</span></label>
<label class="span2"><span>Label2</span></label>
</div>
<div class="controls controls-row">
<input type="text" class="span9" />
<input type="text" class="span2" />
</div>
I got it to work using this workaround-ish structure:
<div class="controls controls-row">
<div class="span9">
<label><span>Label</span></label>
</div>
<div class="span2">
<label><span>Label2</span></label>
</div>
</div>
<div class="controls controls-row">
<div class="span9">
<input type="text" class="span12" />
</div>
<div class="span2">
<input type="text" class="span12" />
</div>
</div>
So could this be a bug? Because on the Twitter Bootstrap page it says:
Use .span1 to .span12 for inputs that match the same sizes of the grid columns.
Here's a JSFiddle that reproduces my problem.
Probably the easiest fix is to remove the whitespace in the HTML between the two inputs:
<input type="text" class="span9" />
<input type="text" class="span2" />
to:
<input type="text" class="span9" /><input type="text" class="span2" />
I managed to do it using grid system:
<div class="row-fluid">
<div class="span9">
<label>First name</label>
<input name="firstName" class="span12" placeholder="First name" type="text">
</div>
<div class="span3">
<label>Last name</label>
<input name="lastName" class="span12" placeholder="Last name" type="text">
</div>
</div>
The reason it's misaligned is a whitespace after first <input>. This whitespace seems to be an old browsers "feature": they add Unicode SPACE (U+0020) character after an <input> immediately followed by other <input>, unless they are on the same line in the markup.
You can reduce ancestor's font size to 0, so this space won't be visible:
.controls.controls-row { font-size: 0; }
Related
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've been doing dev on this online form submissions site and using HTML/CSS to align the fields and what not. I was doing fine until i needed to put little boxes around each section because I would have too many div's and would close each other when I don't want them to. So my question is, is there a way to explicitly tell each closing </div> to close certain div class' or should I just use another tag in general.
HTML:
<div class="print_content">
<div class="generalinfo">
<h4>User Information</h4>
<hr/>
</div>
<!--form starts-->
<form>
<div class="half">
<legend><b style="color:red",>*</b>
<label for="name">Name</label><legend>
<input type="text" id="name" name="name">
</div>
<!-- added div class clear to have a half class in 1 row -->
<div class="clear"></div>
<div class="half">
<label for="email">Email</label>
<input type="text" id="email" name="email">
</div>
<div class="half">
<label for="zip">Zip / Postal code</label>
<input type="text" id="zip" name="zip">
</div>
<div class="half">
<label for="abc" class="alignleft">abc</label>
<span class="left-text">abcabc</span>
</div>
<div class="half">
<label for="country">Country</label>
<select id="country" name="country"><option></option></select>
</div>
<div class="full">
<label for="message">Message</label>
<textarea id="message" name="message"></textarea>
</div>
<div class="full">
<label for="zip">Zip / Postal code</label>
<input type="text" id="zip" name="zip">
</div>
<div class="half">
<input type="checkbox" id="copy" name="copy">
<label for="copy">Send me a copy</label>
</div>
<div class="half">
<legend><b style="color:red",>*</b>
<label for="name">Name</label><legend>
<input type="text" id="name" name="name">
</div>
<div class="half">
<div class="nocolor">
google
</div>
</div>
</div>
</div>
I think "< ul >" with some "< li >" would be great here.
Just do it like this:
<ul>
<li class="half">
<input ...
<label ...
</li>
</ul>
Further information http://www.w3.org/TR/html401/struct/lists.html
HTML often gives you more than one (or 10) possibilities to achieve something. Generally I like your approach to use a very basic element (like a div) if you don't know a more specific one.
If you're feeling again like you're using too much divs and that there might be another solution, just search for sites which have a similar solution than your product implemented. With "F12" (most browsers) you can explore what they've used.
I am trying to display a year range input on a form that has a 2 textboxes. One for the min and one for the max and are separated by a dash.
I want this all on the same line using bootstrap, but I cannot seem to get it to work correctly.
Here's my code:
<form id="Form1" class="form-horizontal" role="form" runat="server">
<div class="row">
<div class="form-group">
<label for="tbxContactPhone" class="col-sm-2 control-label">Year</label>
<div class="col-sm-4">
<asp:TextBox ID="TextBox1" CssClass="form-control" runat="server" MaxLength="4" />
</div>
<label class="col-sm-2 control-label">-</label>
<div class="col-sm-4">
<asp:TextBox ID="TextBox2" CssClass="form-control" runat="server" MaxLength="4" />
</div>
</div>
</div>
</form>
Here's what it looks like now:
How about using an input group to style it on the same line?
Here's the final HTML to use:
<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<span class="input-group-addon">-</span>
<input type="text" class="form-control" placeholder="End"/>
</div>
Which will look like this:
Here's a Stack Snippet Demo:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<span class="input-group-addon">-</span>
<input type="text" class="form-control" placeholder="End"/>
</div>
I'll leave it as an exercise to the reader to translate it into an asp:textbox element
#KyleMit's answer on Bootstrap 4 has changed a little
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-prepend">
<span class="input-group-text">-</span>
</div>
<input type="text" class="form-control">
</div>
The problem is that .form-control class renders like a DIV element which according to the normal-flow-of-the-page renders on a new line.
One way of fixing issues like this is to use display:inline property. So, create a custom CSS class with display:inline and attach it to your component with a .form-control class. You have to have a width for your component as well.
There are other ways of handling this issue (like arranging your form-control components inside any of the .col classes), but the easiest way is to just make your .form-control an inline element (the way a span would render)
For Bootstrap 4
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<div class="input-group-prepend">
<span class="input-group-text" id="">-</span>
</div>
<input type="text" class="form-control" placeholder="End"/>
</div>
Bootstrap 3.3.7:
Use form-inline.
It only works on screen resolutions greater than 768px though. To test the snippet below make sure to click the "Expand snippet" link to get a wider viewing area.
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<form class="form-inline">
<input type="text" class="form-control"/>-<input type="text" class="form-control"/>
</form>
Reference: https://getbootstrap.com/docs/3.3/css/#forms-inline
did you check boostrap website? search for "forms"
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
#KyleMit answer is one way to solve this, however we may chose to avoid the undivided input fields acheived by input-group class. A better way to do this is by using form-group and row classes on a parent div and use input elements with grid-system classes provided by bootstrap.
<div class="form-group row">
<input class="form-control col-md-6" type="text">
<input class="form-control col-md-6" type="text">
</div>
Just put two inputs inside a div with class form-group and set display flex on the div style
<form method="post">
<div class="form-group" style="display: flex;"><input type="text" class="form-control" name="nome" placeholder="Nome e sobrenome" style="margin-right: 4px;" /><input type="text" class="form-control" style="margin-left: 4px;" name="cpf" placeholder="CPF" /></div>
<div class="form-group" style="display: flex;"><input type="email" class="form-control" name="email" placeholder="Email" style="margin-right: 4px;" /><input type="tel" class="form-control" style="margin-left: 4px;" name="telephone" placeholder="Telefone" /></div>
<div class="form-group"><input type="password" class="form-control" name="password" placeholder="Password" /></div>
<div class="form-group"><input type="password" class="form-control" name="password-repeat" placeholder="Password (repeat)" /></div>
<div class="form-group">
<div class="form-check"><label class="form-check-label"><input type="checkbox" class="form-check-input" />I agree to the license terms.</label></div>
</div>
<div class="form-group"><button class="btn btn-primary btn-block" type="submit">Sign Up</button></div><a class="already" href="#">You already have an account? Login here.</a></form>
How do we place form fields horizontally using Twitter Bootstrap
I tried below HTML code. But it shows one by one like below
First Name - Text Box
Last Name - Text Box
Search
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="first">First Name</label>
<div class="controls">
<input type="text" id="first" placeholder="firstname">
</div>
</div>
<div class="control-group">
<label class="control-label" for="lastname">Last Name</label>
<div class="controls">
<input type="text" id="lastname" placeholder="Last Name">
</div>
</div>
<div class="control-group">
<div class="controls">
<button type="submit" class="btn">Search</button>
</div>
</div>
</form>
I want First Name and Last Name should be placed horizontally in first line and in next line Search Button.
Like this
First Name - Text Box Last Name - Text Box
Search
Add inline class to First name, Last name control-group div:
<div class="control-group inline">
CSS
.inline {
display:inline-block;
}
Working fiddle http://jsfiddle.net/GgSRN/
try this
<form class="form-group form-inline">
<label class="control-label" for="first">First Name</label>
<input type="text" id="first" placeholder="firstname">
<label class="control-label" for="lastname">Last Name</label>
<input type="text" id="lastname" placeholder="Last Name">
<div>
<button type="submit" class="btn">Search</button>
</div>
</form>
check bootstrap inline Form
it will be good to go as you said.
Use CSS in a separate file to style your html. I'd personally wrap them in a <div class="row"> using Bootstrap and use one of those for each 'row' you want to create.
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">