I trying to create a horizontal form in bootstrap and have used the code they've given in the documentation. In the example they have given the input boxes fill the entire column space. For some reason this does not happen for me even if I copy the code. How to I get mine to be the same format?
Here is how it looks on the bootstap website
Here is an image of how this looks in my code
Here is my code:
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>Account Details</h2>
<form action="/account" method="post" class="form-horizontal">
<div class="form-group row">
<label for="height" class="col-sm-2 col-form-label">Height</label>
<div class="col-sm-10">
<input class="form-control" type="number" value="{{ account_details[0].height }}" id="height" name="height" min=0 max=300 step=1>
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
</div>
</div>
</div>
It happened because of max='300'; when you set max condition for an input, size of that input change to max width that it needs to fill input for max value and because of that width change to a smaller input:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<h2>Account Details</h2>
<form action="/account" method="post" class="form-horizontal">
<div class="form-group row">
<label for="height" class="col-sm-2 col-form-label">Height</label>
<div class="col-sm-10">
<input class="form-control" type="number" id="heightname="height" min=0 step=1>
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
The result with this should be like :
Thanks for the help, found bootstrap was interacting with something in my css page
Related
<div class="col-sm-12 col-md-12 text-center">
<h1>Example Horizontal Form Bootstrap</h1>
</div>
<div class="col-sm-12 col-md-4"></div>
<div class="col-sm-12 col-md-4 text-center">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Enter your Email here........! Hello </label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Enter your Email here........! Hello</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
I want to place the "text and textbox" in one line. At present, I am getting text in multiple lines beside the textbox like below.
You have a couple of options.
Option 1:
Reduce the label text and/or increase the column allocated to it. Example
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-4">
<form>
<div class="form-group form-row">
<label for="inputEmail3" class="col-sm-3 col-form-label text-sm-right">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group form-row">
<label for="inputPassword3" class="col-sm-3 col-form-label text-sm-right">Password</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
</div>
</div>
</div>
Option 2: You can use text-truncate class to truncate any overflow text. Example
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 col-md-4">
<form>
<div class="form-group form-row">
<label for="inputEmail3" class="col-sm-3 col-form-label text-sm-right text-truncate">Enter your Email here........! Hello</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group form-row">
<label for="inputPassword3" class="col-sm-3 col-form-label text-sm-right text-truncate">Enter your Password here........! Hello</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</form>
</div>
</div>
</div>
Does anyone know if this kind of thing is possible?
I've tried using inline-group and form-inline but then it doesn't seem to conform to fit the full grid width.
Whereas form-horizontal seems to expect the entire form on one row.
This code creates the desired output (two form controls on one row) but form-groups are required around each one for viewing in sm mode.
NB: This is for a 16 col grid.
<form>
<div className="form-group row">
<!--form group needed here -->
<label className="col-form-label col-md-2" htmlFor="formGroupExampleInput">First Name*</label>
<div className="col-md-5">
<input type="text" className="form-control" id="formGroupExampleInput" placeholder="Example input" />
</div>
<!--form group needed here -->
<label className="offset-md-2 col-form-label col-md-2" htmlFor="formGroupExampleInput">Last Name*</label>
<div className="col-md-5">
<input type="text" className="form-control" id="formGroupExampleInput" placeholder="Example input" />
</div>
</div>
</form>
I don't think this is a duplicate of:
Bootstrap 3: How to get two form inputs on one line and other inputs on individual lines?
...because this isn't leaving me with full control of grid columns within via form labels etc.
Place your form-groups into .col-* containers to align the groups in a horizontal layout, for example:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form>
<div class="col-xs-6 form-group">
<label for="inputEmail3" class="control-label">Email</label>
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
<div class="col-xs-6 form-group">
<label for="inputPassword3" class="control-label">Password</label>
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</form>
If controls of a form group should be aligned in a horizontal layout too, use .form-horizontal class for the form. In this case .form-groups behaves as grid rows. Thus, it is possible to apply Nesting columns template for your form:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form class="form-horizontal">
<div class="col-xs-6">
<div class="form-group">
<label for="inputEmail3" class="col-xs-3 control-label">Email</label>
<div class="col-xs-9">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="inputPassword3" class="col-xs-4 control-label">Password</label>
<div class="col-xs-8"><input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</div>
</form>
My bad, I just hadn't understood nested rows properly:
https://v4-alpha.getbootstrap.com/layout/grid/#nesting
This works fine:
<form>
<div class="row">
<div class="col-md-8">
<div class="form-group row">
<label class="col-form-label col-md-4" for="formGroupExampleInput">First Name*</label>
<div class="col-md-10">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" />
</div>
</div>
</div>
<div class="col-md-8">
<div class="form-group row">
<label class="offset-md-2 col-form-label col-md-4" for="formGroupExampleInput">Last Name*</label>
<div class="col-md-10">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" />
</div>
</div>
</div>
</div>
</form>
I want this kind of a setup as in the below screenshot.
But currently with the code that I have written, I am getting the below output. I tried various options but unable to get the same output as above.
My current HTML Code:
<form role="form" class="form-horizontal">
<div class="form-group">
<label style="" for="inputPackageName" class="col-sm-2 control-label">Package Name
</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputPackageName" placeholder="Package Name">
</div>
<label style="" for="inputApplicationName" class="col-sm-2 control-label">Application
Name</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputApplicationName"
placeholder="Package Name">
</div>
</div>
</form>
Any idea as to how to get the required layout as in screenshot. Also how to utilize the white space effectively. i.e. Some labels might require more space, some might require less space. How to have the consistency in bootstrap?
Just don't give the class col-sm-2 (in your case) to the labels.
Try to use this layout for the input fields:
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>...</label>
<input class="form-control" .../>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>...</label>
<input class="form-control" .../>
</div>
</div>
This will render a row with 2 columns. To add more rows just copy the layout
Try this:
`.
< div class="col-sm-6">
...
< div class="col-sm-6">
...
<div class="col-md-12">
< div class="col-sm-6">
<div class="form-group">
<label>...</label>
<input class="form-control" .../>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>...</label>
<input class="form-control" .../>
</div>
</div>
</div>
<div class="col-md-12">
< div class="col-md-12">
<div class="form-group">
<label>...</label>
<input class="form-control" .../>
</div>
</div>
</div>
`
This should give you what you want (as long as you don't have other CSS rules that could override Bootstrap):
<form class="form-horizontal">
<div class="form-group">
<label for="inputProjectId" class="col-sm-2 control-label">Project ID</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputProjectId" placeholder="Project ID">
</div>
<label for="inputProjectName" class="col-sm-2 control-label">Project Name</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputProjectName" placeholder="Project Name">
</div>
</div>
<div class="form-group">
<label for="inputReleaseDate" class="col-sm-2 control-label">Release Date</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputReleaseDate" placeholder="Release Date (mm/dd/yyyy)">
</div>
<label for="inputSupervisor" class="col-sm-2 control-label">Supervisor</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputSupervisor" placeholder="Supervisor">
</div>
</div>
<div class="form-group">
<label for="inputProjectDescriptiond" class="col-sm-2 control-label">Project Description</label>
<div class="col-sm-10">
<textarea class="form-control" id="inputProjectDescriptiond" rows="3" placeholder="Enter Project Description"></textarea>
</div>
</div>
</form>
Just paste this code:
<form role="form" class="form-horizontal">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="inputProjectID" class="col-sm-4 control-label">Project ID</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputProjectID" placeholder="Project ID">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputProjectName" class="col-sm-4 control-label">Project Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputProjectName"
placeholder="Project Name">
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="inputReleaseDate" class="col-sm-4 control-label">Release Date</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputReleaseDate" placeholder="Release Date (mm/dd/yyyy)">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputSupervisor" class="col-sm-4 control-label">Supervisor</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputSupervisor" placeholder="Supervisor">
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label for="inputProjectDescription" class="col-sm-2 control-label">Project Description</label>
<div class="col-sm-10">
<textarea class="form-control" id="inputProjectDescription" rows="3" placeholder="Enter Project Description"></textarea>
</div>
</div>
</div>
</form>
Hope this will help you!!
Finally got a better & easy implementation the same way I wanted.Below is the code!
<form class="form-horizontal" id="main-form" role="form" data- toggle="validator" action="blank.html" method="post">
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectID">Project ID </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectID" name="inputProjectID" type="text" placeholder="Your Project ID" class="form-control input-md">
</div>
<label class="col-md-2 control-label" for="inputProjectName">Project Name </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectName" name="inputProjectName" type="text" placeholder="Your Project Name" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="group">
<label class="col-md-2 control-label" for="datepicker">Release Date </label>
<div class="col-md-3 col-3-input">
<input id="datepicker" name="inputReleaseDate" type="text" placeholder="Select Release Date" class="form-control input-md">
</div>
</div>
<div class="group">
<label class="col-md-2 control-label" for="inputSupervisor">Supervisor </label>
<div class="col-md-3 col-3-input">
<input id="textinput" name="textinput" type="text" placeholder="Your Supervisor's Name" class="form-control input-md">
</div>
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectDesc">Project Description </label>
<div class="col-md-9 col-9-input">
<textarea style="resize: none;" rows="3" class="form-control" id="inputProjectDesc" name="inputProjectDesc" placeholder="Your Project Description"></textarea>
</div>
</div>
</form>
I've noticed that when using control group addons with Bootstrap that the total width of the control group is larger than those controls that do not have addons. This width change does not seem to be affected by the number of addons used.
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="inputElementName" class="control-label col-sm-4">Element Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputElementName" placeholder="Enter name for element" />
</div>
</div>
<div class="form-group">
<label for="inputElementFrequency" class="control-label col-sm-4">Element Frequency</label>
<div class="col-sm-6 input-group"> <span class="input-group-addon">Every</span>
<input type="number" class="form-control" id="inputElementFrequency" placeholder="Enter how often this element appears." /> <span class="input-group-addon">numbers</span>
</div>
</div>
<div class="form-group">
<label for="inputElementData" class="control-label col-sm-4">Element Data</label>
<div class="col-sm-6 input-group">
<input type="number" class="form-control" id="inputElementData" placeholder="Enter this element's data." /> <span class="input-group-addon">Data</span>
</div>
</div>
</form>
</div>
How can I ensure my controls fill the same width, regardless of addons?
The .input-group div should be part of its own element instead of lumped in with .col-xs-6. Remember, an .input-group div is taking the place of an input control. So use them interchangeably.
Instead of this:
<div class="col-sm-6 input-group">
<span class="input-group-addon">Every</span>
<input type="number" class="form-control" />
</div>
Do this:
<div class="col-sm-6 ">
<div class="input-group">
<span class="input-group-addon">Every</span>
<input type="number" class="form-control" />
</div>
</div>
Demo in Stack Snippets
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<form role="form" class="form-horizontal">
<div class="form-group">
<label for="inputElementName" class="control-label col-sm-4">Element Name</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="inputElementName" placeholder="Enter name for element" />
</div>
</div>
<div class="form-group">
<label for="inputElementFrequency" class="control-label col-sm-4">Element Frequency</label>
<div class="col-sm-6 ">
<div class="input-group">
<span class="input-group-addon">Every</span>
<input type="number" class="form-control" id="inputElementFrequency" placeholder="Enter how often this element appears." /> <span class="input-group-addon">numbers</span>
</div>
</div>
</div>
<div class="form-group">
<label for="inputElementData" class="control-label col-sm-4">Element Data</label>
<div class="col-sm-6 ">
<div class="input-group">
<input type="number" class="form-control" id="inputElementData" placeholder="Enter this element's data." /> <span class="input-group-addon">Data</span>
</div>
</div>
</div>
</form>
</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>