I am trying to make an inline text field within a horizontal form, basically I want to split the form in to two sections ( left and right) , in the left hand I will have like horizontal text fields and some inline as well and on the right hand side I want to have some inline and some are not.
How could I establish something like that , maybe this drawing could help
JSFiddle Here : http://jsfiddle.net/XQx6v/
Here is my code which is not working ( I want to make it 900 px centered and also responsive to drop to the other line if its small):
<form class="form-horizontal" action="" method="POST">
<!-- first Row -->
<div style="margin:auto; width:900px;" class="row">
<div class="col-xs-6">
<div class="row">
<div class="form-group">
<label class="control-label">First Name</label>
<input type="text" value="test" name="first_name" class="form-control beta">
<label class="control-label">Last Name</label>
<input type="text" value="test" name="last_name" class="form-control beta"> </div>
</div>
</div>
<!-- Next Column -->
<div class="col-xs-6">
<div class="row">
<p> testhghghjg </p>
</div>
</div>
</div>
</form>
Thanks
I think you don't actually want what Bootstrap refers to as an inline form, but a form with inline elements... Try this Bootply
<div class="container" style="max-width:900px">
<div class="row">
<div class="col-md-3">
<form role="form">
<div class="form-group">
<label>Name 1</label>
<input type="email" class="form-control" placeholder="Enater Name">
</div>
</form>
</div>
<div class="col-md-3">
<form role="form">
<div class="form-group">
<label>Name 2</label>
<input type="email" class="form-control" placeholder="Enater Name">
</div>
</form>
</div>
<div class="col-md-3">
<form role="form">
<div class="form-group">
<label>Name 3</label>
<input type="email" class="form-control" placeholder="Enater Name">
</div>
</form>
</div>
<div class="col-md-3">
<form role="form">
<div class="form-group">
<label>Name 4</label>
<input type="email" class="form-control" placeholder="Enater Name">
</div>
</form>
</div>
</div></div>
Related
Hi,
How do I get a layout like in the picture?
When I expand the Accordion control on the right side , the left side panel shouldnot change.Please help.Thanks!
Use legend and fieldset tag with form.
Use .row class as the parent class of col-6 and add form tag in that.
Visit for more information https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_fieldset
Example
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="row">
<div class="col-6">
<form>
<fieldset class="border p-2">
<legend class="w-auto">Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
</fieldset>
</form>
</div>
<div class="col-6">
<form>
<fieldset class="border p-2">
<legend class="w-auto">Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
</fieldset>
</form>
</div>
</div>
For left side panel, I tried this and it works.
<!--First row starts here-->
<div class="row" style="padding-bottom:8px;margin-left:-350px;font-family:arial;font-size:15px;">
<div class="col-sm-2 required;">
<label>
col 1
</label>
</div>
<div class="col-md-4 required">
#Html.TextBoxFor(c => c.FormCode, new { id = "formcode", #class = "txtboxclass1" })
</div>
</div>
<!--First row ends here-->
How do I align Expand 1 and Expand 2 columns properly? I tried modifying above code as below, but when I click the expand button its making the left side controls to come down
<!--First row starts here-->
<div class="row" style="padding-bottom:8px;margin-left:-350px;font-family:arial;font-size:15px;">
<div class="col-sm-2 required;">
<label>
col 1
</label>
</div>
<div class="col-md-4 required">
#Html.TextBoxFor(c => c.FormCode, new { id = "formcode", #class = "txtboxclass1" })
</div>
<div id="dvAccordian">
<div class="col-sm-2 required">
Template Code
</div>
<div class="col-md-4 required">
<aClick Here</a>
</div>
</div>
</div>
<!--First row ends here-->
I've defined a number of Bootstrap elements and want to position each label and input set in a stacked layout. At the moment the layout positioning forces the label to be positioned left of the corresponding control when the browser in maximized.
In order to re-position to a stacked layout I tried placing the label inside the same div as the input. I also tried setting the col-xs-1 property on the parent div mentioned here or increasing the col size which only pushes the label right covering the input instead of on top.
So the layout at present looks like this where my label is left aligned to the input:
Instead I'm aiming to position like this:
The window does resize to stack the labels when I reduce the size of my browser window, but when it's maximized the labels appear alongside.
Question:
Can someone explain how to stack sets of label and input controls in Bootstrap 3?
Sample of my layout:
<div class="container body-content">
<div class="page-header">
<div class="form-group">
<fieldset>
<form action="" id="createForm" class=
"form-group has-feedback" method="post">
<div class="form-horizontal">
<div class="col-lg-12">
<div class="form-group">
<label class="col-md-1 control-label" for=
"Application">Application</label>
<div class="col-md-4">
<input id="ApplicationID" name="Application"
required="required" type="text" class=
"form-control" />
</div>
</div>
<div class="form-group">
<label class="col-md-1 control-label" for=
"EscID">EM</label>
<div class="col-md-4">
<input id="EscID" name="EM" type="text"
placeholder="(If Applicable)" class=
"form-control" />
</div>
</div>
</div>
</div>
</form><!--END OF FORM ^^-->
</fieldset>
</div>
</div>
</div>
The reason here is you have parent column of 12( col-lg-12 - right inside .form-horizontal) grid. Now the child columns you have is col-md-1 (for label) and col-md-4(for input). So they are suppose to be in same parent row having column size of 12(col-lg-12).
What you could do is as following:
Give the label column of 9 and input column of 4(as it is). So in sum it exceeds 12. Which forces input to bring down(stacked as you want).
But in giving label column of 9 your text would appear on right(far far away...), so don't forget to add CSS: text-align:left; to .control-label. Also this class .control-label must be selected by parent, so it won't effect any other similar class in your document.
UPDATE: Scenario -
Image 1:
Image 2:
Image 3:
.control-label { text-align: left !important; }
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container body-content">
<div class="page-header">
<div class="form-group">
<fieldset>
<form action="" id="createForm" class="form-group has-feedback" method="post">
<div class="form-horizontal">
<div class="col-lg-12">
<div class="form-group">
<label class="col-md-9 control-label" for="Application">Application</label>
<div class="col-md-4">
<input id="ApplicationID" name="Application" required="required" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label class="col-md-9 control-label" for="EscID">EM</label>
<div class="col-md-4">
<input id="EscID" name="EM" type="text" placeholder="(If Applicable)" class="form-control" />
</div>
</div>
</div>
</div>
</form>
<!--END OF FORM ^^-->
</fieldset>
</div>
</div>
</div>
See the basic form on Bootstrap's website.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Just remove:
The div with class="form-horizontal" (and it's closing tag)
Then remove your col-md-4, col-md-9 class references for the label and input tags.
Revised code:
https://jsfiddle.net/4bnndd8b/3/
Edit: if you want your form only 4 cols at md and large adjust your : class="col-lg-12" reference... i.e. col-md-4 (md and larger will only be a 4 col form).
<div class="container body-content">
<div class="page-header">
<div class="form-group">
<fieldset>
<form action="" id="createForm" class=
"form-group has-feedback" method="post">
<div class="col-lg-12">
<div class="form-group">
<label class="control-label" for=
"Application">Application</label>
<div class="">
<input id="ApplicationID" name="Application"
required="required" type="text" class=
"form-control" />
</div>
</div>
<div class="form-group">
<label class="control-label" for=
"EscID">EM</label>
<div class="">
<input id="EscID" name="EM" type="text"
placeholder="(If Applicable)" class=
"form-control" />
</div>
</div>
</div>
</form><!--END OF FORM ^^-->
</fieldset>
</div>
I have a row with three inputs, two of the inputs have labels to their left. What is happening is the label is being displayed on top of the input box rather than to the side, like so:
Here is what I am trying to achieve:
<div class="row">
<div data-bind="foreach: items" class="padding-left-lg">
<div class="col-sm-4">
<input type="text" data-bind="value: Description,valueUpdate: 'afterkeydown'" class="form-control"/>
</div>
<div class="col-sm-4">
<label class="control-label">
Quantity: <input type="text" data-bind="value: Quantity,valueUpdate: 'afterkeydown'" class="form-control"/>
</label>
</div>
<div class="col-sm-1">
<input type="text" data-bind="value: Units,valueUpdate: 'afterkeydown'" class="form-control"/>
</div>
</div>
</div>
I would try something like this:
<form class="row form-horizontal">
<div class="col-sm-5">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</div>
</form>
Here is the fiddle I made https://jsfiddle.net/g3e8yjyg/.
What is different from the default Bootstrap example? You treat your form as a row or a set of rows, and each formgroup becomes a cell, where you will only vary the value of the size. This will allow you to put many fields in a single row.
<form class="row">
<!--Columns -->
<div class="col-lg-*">
<!--Your form group in here -->
<div class="form-group">
<!--The elements of you formgroup treated as col divs-->
<label for="inputPassword3" class="col-lg-*">Your label</label>
<div class="col-lg-*">
<input name="my-input">
</div>
</div>
</div>
<!--Columns -->
<div class="col-lg-*">
...
</div>
</form>
Add the form-inline class to your form, add the form-group class to the containing div, and move the input tag out of your label tag:
<form class="form-inline">
<div class="form-group col-sm-4">
<label class="control-label">Quantity:</label>
<input type="text" data-bind="value: Quantity,valueUpdate: 'afterkeydown'" class="form-control"/>
</div>
</div>
I want to build a form in Bootstrap 3 like this:
My site (not the above link) just updates from Bootstrap 2.3.2 and the format is not correct anymore.
I cannot find any doc about this type of form on getbootstrap.com.
Could anyone tell me how to do this? Only 'Username' would be OK.
Thanks.
PS There is a similar question but it's using Bootstrap 2.3.2.
I have created a demo for you.
Here is how your nested structure should be in Bootstrap 3:
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
</div>
</div>
Notice how the whole form-inline is nested within the col-xs-10 div containing the control of the horizontal form. In other terms, the whole form-inline is the "control" of the birthday label in the main horizontal form.
Note that you will encounter a left and right margin problem by nesting the inline form within the horizontal form. To fix this, add this to your css:
.form-inline .form-group{
margin-left: 0;
margin-right: 0;
}
Another option is to put all of the fields that you want on a single line within a single form-group.
See demo here
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-10">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name"/>
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
</form>
This Bootply example seems like a much better option. Only thing is that the labels are a little too high so I added padding-top:5px to center them with my inputs.
<div class="container">
<h2>Bootstrap Mixed Form <p class="lead">with horizontal and inline fields</p></h2>
<form role="form" class="form-horizontal">
<div class="form-group">
<label class="col-sm-1" for="inputEmail1">Email</label>
<div class="col-sm-5"><input type="email" class="form-control" id="inputEmail1" placeholder="Email"></div>
</div>
<div class="form-group">
<label class="col-sm-1" for="inputPassword1">Password</label>
<div class="col-sm-5"><input type="password" class="form-control" id="inputPassword1" placeholder="Password"></div>
</div>
<div class="form-group">
<label class="col-sm-12" for="TextArea">Textarea</label>
<div class="col-sm-6"><textarea class="form-control" id="TextArea"></textarea></div>
</div>
<div class="form-group">
<div class="col-sm-3"><label>First name</label><input type="text" class="form-control" placeholder="First"></div>
<div class="col-sm-3"><label>Last name</label><input type="text" class="form-control" placeholder="Last"></div>
</div>
<div class="form-group">
<label class="col-sm-12">Phone number</label>
<div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">area</div></div>
<div class="col-sm-1"><input type="text" class="form-control" placeholder="000"><div class="help">local</div></div>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="1111"><div class="help">number</div></div>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="123"><div class="help">ext</div></div>
</div>
<div class="form-group">
<label class="col-sm-1">Options</label>
<div class="col-sm-2"><input type="text" class="form-control" placeholder="Option 1"></div>
<div class="col-sm-3"><input type="text" class="form-control" placeholder="Option 2"></div>
</div>
<div class="form-group">
<div class="col-sm-6">
<button type="submit" class="btn btn-info pull-right">Submit</button>
</div>
</div>
</form>
<hr>
</div>
To make it work in Chrome (and bootply) i had to change code in this way:
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-xs-2 control-label">Name</label>
<div class="col-xs-10">
<input type="text" class="form-control col-sm-10" name="name" placeholder="name" />
</div>
</div>
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<input type="text" class="form-control" placeholder="year" />
<input type="text" class="form-control" placeholder="month" />
<input type="text" class="form-control" placeholder="day" />
</div>
</div>
</div>
</form>
A much simpler solution, without all the inside form-group elements
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday</label>
<div class="col-xs-10">
<div class="form-inline">
<input type="text" class="form-control" placeholder="year" style="width:70px;"/>
<input type="text" class="form-control" placeholder="month" style="width:80px;"/>
<input type="text" class="form-control" placeholder="day" style="width:100px;"/>
</div>
</div>
</div>
... and it will look like this,
Cheers!
I had problems aligning the label to the input(s) elements so I transferred the label element inside the form-inline and form-group too...and it works..
<div class="form-group">
<div class="col-xs-10">
<div class="form-inline">
<div class="form-group">
<label for="birthday" class="col-xs-2 control-label">Birthday:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
</div>
</div>
In Bootstrap 2.3, is there a standardized way to have a two-column layout for an HTML <form> with labels/inputs/actions? I don't see any in the documentation.
An example image of what I want: http://i.imgur.com/3o6IoN4.png
As an aside, I need there to be a solid background color that spans the entire width of the div.span12 or other enclosing container. Having two .span6 causes a break in the background color in the center (which I suppose can be fixed by wrapping the two .span6 in a div.clearfix with the background class applied?
Easy stuff. Bring the bootstrap row within a parent div and set the background of that div to a color of your choosing.
The Markup:
<div id="background-color">
<form id="form1" name="form1" method="post" action=""><!-- START THE FORM -->
<div class="row-fluid">
<div class="span6"> <!-- FIRST COLUMN -->
<label>First Name</label>
<label for="textfield"></label>
<input type="text" />
<label>Last Name</label>
<label for="textfield"></label>
<input type="text" />
</div>
<div class="span6"> <!-- SECOND COLUMN -->
<label>Other</label>
<label for="textfield"></label>
<input type="text" />
<label>Fields</label>
<label for="textfield"></label>
<input type="text" />
<input type="submit" name="button" id="button" value="Submit" />
</form> <!-- END THE FORM -->
</div>
</form>
</div> <!-- End row -->
</div> <!-- END BACKGROUND -->
The CSS:
#background-color {background-color: #CCC;}
I hope this helps
To my understanding for Bootstrap 3 these changes are required;
all code sitting in container to access grid system info here
span to col for new version
use device class as suits your requirements info here
labels and controls wrapped in form-group for spacing info here
form class to form-horizontal removes the need for row divs (i have used nested columns without rows, seems to display correctly with form-horizontals function)
panel used to frame the form as pictured
<div class="container">
<div class="panel panel-default" style="background-color: #CCC">
<div class="panel-body">
<form id="form1" name="form1" method="post" action="" class="form-horizontal"><!-- START THE FORM -->
<div class="col-sm-6"> <!-- FIRST COLUMN -->
<div class="form-group">
<label for="inputFirstname" class="col-sm-4 control-label">First Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputFirstname" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label for="inputLastname" class="col-sm-4 control-label">Last Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputLastname" placeholder="Last Name">
</div>
</div>
</div>
<div class="col-sm-6"> <!-- SECOND COLUMN -->
<div class="form-group">
<label for="inputEmail" class="col-sm-4 control-label">Email</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputUsername" class="col-sm-4 control-label">Username</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputUsername" placeholder="Username">
</div>
</div>
</div>
</form> <!-- END THE FORM -->
</div>
</div><!-- END PANEL -->
</div>