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/
Related
Sorry if this is a stupid question but I have used bootstrap for a school project and got this as a mistake so I would like to understand what is the error.
It's about the use of forms.
In the w3c html documentation there is a use of name attribute:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
While in the bootstrap documentation, there isn't
<form>
<div class="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>
</div>
</form>
Do I have to add those attribute myself or should it be use as is with bootstrap ?
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>
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 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>
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/