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>
Related
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/
This is my form, i want the form to change colors when errors/something occurs.
Example, if a user did not input anything in a required field, i want it to change colors using bootstrap's css classes, can anyone teach me how i could make that happen?
p.s. i am new, so sorry for a newbie question.
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Form Name</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="name">Name</label>
<div class="col-md-5">
<input id="name" name="name" type="text" placeholder="Enter Name" class="form-control input-md" required="">
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="password">Password</label>
<div class="col-md-5">
<input id="password" name="password" type="password" placeholder="Enter Password" class="form-control input-md" required="">
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="button"></label>
<div class="col-md-4">
<input type = "submit" id="button" name="button" value = "Submit" class="btn btn-success">
</div>
</div>
</fieldset>
</form>
There is a CSS selector for this purpose (:invalid), but on the individual input level. You can color the whole form by checking for children which are invalid, like so:
/* add space to denote child element */
form :invalid {
background: red;
}
For Bootstrap, just add has-error class to form group.
<div class="form-group has-error">
<label class="col-md-4 control-label" for="name">Name</label>
<div class="col-md-5">
<input id="name" name="name" type="text" placeholder="Enter Name" class="form-control input-md" required="">
</div>
</div>
For more information, look the documentation: http://getbootstrap.com/css/#forms-help-text
And live demo: http://jsbin.com/daxocivoho/1/edit?html,output
You can change the text color to green for correct inputs and red for wrong inputs:
.form-control:valid {
color:green;
}
.form-control:invalid {
color:red;
}
You can also change the border color to red for wrong inputs as follows:
.form-control:invalid {
border-color: red;
}
Is there anyway I can create a form using bootstrap which can have fields aligned in same line as well as horizontal fields?
Something like this?
in this the cvv MM and YY are in the same line..How can i make it possible using bootstrap form?
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label><input type="email" class="form-control" id="exampleInputEmail1" />
</div>
<div class="form-group">
<label for="exampleInputEmail1">CVV</label><input type="email" class="form-control" id="cvv" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label><input type="password" class="form-control" id="exampleInputPassword1" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
I want the cvv to be aligned with the first form field
Wrap your input fields in a div and assign a col-sm-x class to it e.g:
<div class="form-group">
<label class="col-sm-3 control-label" for="cardNumber">Card # (required)</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="cardNumber" size="12" autocomplete='off'>
</div>
</div>
Also add a col-sm-x to your labels
For columns:
<div class="form-group">
<label class="col-sm-3 control-label">Expiry date(MM/YYYY) (required)</label>
<div class="col-sm-2">
<input type="text" class="form-control" placeholder="MM" size="2" autocomplete='off'>
</div>
<div class="col-sm-2">
<input type="text" class="form-control" placeholder="YYYY" size="4" autocomplete='off'>
</div>
</div>
Finally, class of form should be form-horizontal Play with the col width as you like
Wrap your input fields as above in one div but add to this div the 'form-inline' class. No need of the col-sm-x class.
<div class="form-group form-inline">
<label class="control-label">Expiry date(MM/YYYY) (required)</label>
<input type="text" class="form-control" placeholder="MM" size="2" autocomplete='off'>
<input type="text" class="form-control" placeholder="YYYY" size="4" autocomplete='off'>
</div>
</div>
I have made two forms for registering. When i add the code below to the page the second field automatically drops down below the first one. I would like it to go besides it.
<h1>Register</h1>
<input type="text" class="form-control" placeholder="Forename" autofocus style="width:150px">
<input type="text" class="form-control" placeholder="Surname" autofocus style="width:150px">
here is an example of what it looks like in normal html (currently) and that is what i want it to look like. But in bootstrap it keeps taking new line
Reference the inline form styling on Bootstrap's site.
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
</form>
Alternatively, you can also use columns to put form elements next to one another:
<div class="row">
<div class="col-lg-2">
<input type="text" class="form-control" placeholder=".col-lg-2">
</div>
<div class="col-lg-3">
<input type="text" class="form-control" placeholder=".col-lg-3">
</div>
<div class="col-lg-4">
<input type="text" class="form-control" placeholder=".col-lg-4">
</div>
</div>
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.