i have this two inputs:
<div class="form-group">
<label for="exampleInputEmail1">Original Amount</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Original Amount</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
Its look like this:
How i inline them? (with the label on top of each)
You can use the Bootstrap grid like this..
<div class="row">
<div class="col-sm-4">
<label for="exampleInputEmail1">Original Amount</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
<div class="col-sm-4">
<label for="exampleInputEmail1">Original Amount</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
</div>
</div>
Demo
Just put all your example code inside this div element:
<div class="form-inline">
...
</div>
See http://getbootstrap.com/css/#forms-inline for more info.
Related
Hi can someone help me with aligh this form to the right, i give it a try(stupid one but why not to try) and set form-horizontal margin-left: some px; and it did move form but it resize input. I want to align it to a specific place.
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label for="inputIme" class="col-sm-2 control-label">Ime</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="Ime">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">E-mail</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="E-mail">
</div>
</div>
<div class="form-group">
<label for="inputTelefon" class="col-sm-2 control-label">Telefon</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="Broj Telefona">
</div>
</div>
<div class="form-group">
<label for="inputAdresa" class="col-sm-2 control-label">Adresa</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="Vasa Adresa">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Posalji zahtev</button>
</div>
</div>
</form>
</div>
<div class="col-sm-6 offset-sm-6">
<form class="form-horizontal">
<div class="form-group">
<label for="inputIme" class="col-sm-2 control-label">Ime</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="Ime">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">E-mail</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="E-mail">
</div>
</div>
<div class="form-group">
<label for="inputTelefon" class="col-sm-2 control-label">Telefon</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="Broj Telefona">
</div>
</div>
<div class="form-group">
<label for="inputAdresa" class="col-sm-2 control-label">Adresa</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="Vasa Adresa">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Posalji zahtev</button>
</div>
</div>
</form>
</div>
although your question is not clear to but I guess you need to shift your form at right side so you can use above code
I'm trying to create a registration form. But when I try to run my code, part of it doesn't appear on the screen. I use thymeleaf for work with Spring MVC controllers. I looked Thymeleaf tutorials, stackoverflow, etc... but have not seen any solution.
Please tell me what I do wrong or where I can read about solution of this problem.
Below I put the snippet of my html code.
P.S. Sorry for my English.
<div class="container" id="container-middle">
<form class="form-horizontal" role="form" id="register-form" method="post" th:action="#{/post-user-info}" th:object="${user}">
<h2 id="form-header">Sign up for BlaBla</h2>
<div class="form-group">
<label for="login" class="col-sm-5 control-label">Login:</label>
<div class="col-sm-4">
<input type="text" id="login" placeholder="Login" class="form-control" th:field="*{login}">
</div>
</div>
<div class="form-group">
<label for="first-name" class="col-sm-5 control-label">First name:</label>
<div class="col-sm-4">
<input type="text" id="first-name" placeholder="First name" class="form-control" th:field="*{firstName}">
</div>
</div>
<div class="form-group">
<label for="last-name" class="col-sm-5 control-label">Last name:</label>
<div class="col-sm-4">
<input type="text" id="last-name" placeholder="Last name" class="form-control" th:field="*{lastName}">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-5 control-label">Email:</label>
<div class="col-sm-4">
<input type="email" id="email" placeholder="Email" class="form-control" th:field="*{email}">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-5 control-label">Password:</label>
<div class="col-sm-4">
<input type="password" id="password" placeholder="Password" class="form-control" th:field="*{password}">
</div>
</div>
<div class="form-group">
<label for="birthDate" class="col-sm-5 control-label">Date of birth:</label>
<div class="col-sm-4">
<input type="date" id="birthDate" class="form-control" th:field="*{birthDate}">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-5">Gender:</label>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<label class="radio-inline">
<input type="radio" th:field="*{sex}" th:value="${female}">Female
</label>
<label class="radio-inline">
<input type="radio" th:field="*{sex}" th:value="${male}">Male
</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-3 col-sm-offset-5">
<button type="submit" class="btn btn-primary">Register</button>
</div>
</div>
</form>
</div>
I didn't pass any model from controller to template, so it couldn't put there any result.
That's it! something like ...
public String goAdd(Model model) {
model.addAttribute(new DtoCustomer());
return "customer/edit";
}
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 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>