I've been trying for 3 hours to make a 2 column form with the label aligned on the left, but i am really not getting it. I've read bootstrap documentation, tried to play with "row" class but i dont have the result i want.
Here's a picture of what i'm trying to do, it has to be in 1 form. I've seen a lot of question about this, but no one seems to fit my problem ( people wanted them vertical aligned or within 2 different forms )
If anyone can show me the way to do it, and if possible, some explanation about how to align things using rows, it would be awesome !
Try this ;)
<form class="form-horizontal" role="form">
<div class="col-sm-6">
<div class="container-fluid">
<div class="form-group">
<label class="col-sm-2 control-label">Test</label>
<div class="col-sm-10">
<input class="form-control">
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="container-fluid">
<div class="form-group">
<label class="col-sm-2 control-label">Test</label>
<div class="col-sm-10">
<input class="form-control">
</div>
</div>
</div>
</div>
</form>
http://jsfiddle.net/ttyneyq9/
You say 2 columns, but this configuration looks to me like it should be 4 columns. Because the labels should be their own column, and the textboxes should also be their own.
Something like this:
<div class="row">
<div class="col-sm-2">label</div>
<div class="col-sm-4">textbox</div>
<div class="col-sm-2">label in "2nd" column</div>
<div class="col-sm-4">textbox in "2nd" column</div>
</div>
<div class="row">
<div class="col-sm-2">label</div>
<div class="col-sm-4">textbox</div>
<div class="col-sm-2">label in "2nd" column</div>
<div class="col-sm-4">textbox in "2nd" column</div>
</div>
<div class="row">
<div class="col-sm-2">label</div>
<div class="col-sm-4">textbox</div>
<div class="col-sm-6 text-right">Pay by Phone/SMS</div>
</div>
I've been trying for 3 hours to make a 2 column form with the label aligned on the left, but i am really not getting it.
Because it's a form, you should really take advantage of Bootstraps .form-control and .form-group classes. Here is a sample fiddle for you to review http://jsfiddle.net/yongchuc/hzktphu6/. Bootstrap reference can be found here as well: http://getbootstrap.com/css/#forms
Shouldn't be too bad. You can do it a couple ways:
1) Split each row up into 4 columns
<div class="row">
<div class="col-md-2"><label for="Username">Username</label></div>
<div class="col-md-4"><input type="text" name="Username" /></div>
<div class="col-md-2"><label for="Membership">Membership></label></div>
<div class="col-md-4"><select name="Membership"></select></div>
</div>
<!-- Add other rows for both columns -->
2) Use nested rows/columns
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3"><label for="Username">Username</label></div>
<div class="col-md-9"><input type="text" name="Username" /></div>
</div>
<!-- Add other rows for first column -->
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3"><label for="Membership">Username</label></div>
<div class="col-md-9"><select name="Membership"></select></div>
</div>
<!-- Add other rows for the second column -->
</div>
</div>
In Bootstrap, each row consists of 12 columns by default. The column span is specified in the CSS class for each column (e.g. "col-md-3" will span 3 columns on medium sized screens or larger, for smaller screens the labels will go above the input). You'll just have to adjust the column spans to your liking.
For me it will be something like that
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3"><label>Username</label></div>
<div class="col-md-9"><input type="text" name="Username" class="form-control" /></div>
</div>
<div class="row">
<div class="col-md-3"><label>Password</label></div>
<div class="col-md-9"><input type="password" name="Password" class="form-control" /></div>
</div>
<div class="row">
<div class="col-md-3"><label>Email</label></div>
<div class="col-md-9"><input type="email" name="Email" class="form-control" /></div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-3"><label>Membership</label></div>
<div class="col-md-9"><select name="Membership">----options------</select></div>
</div>
<div class="row">
<div class="col-md-3"><label>Payment</label></div>
<div class="col-md-9"><select name="Payment">----options------</select></div>
</div>
</div>
</div>
and the reason why this is the better solution is because when it's displayed on mobile they will show below each others in the same order as they're written above
<form class="form-horizontal">
<div class="col-xs-6 form-group">
<label for="inputEmail" class="control-label col-xs-4">Valet Parking</label>
<div class="col-xs-8">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputEmail" class="control-label col-xs-4">Kids menus</label>
<div class="col-xs-8">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputPassword" class="control-label col-xs-4">Car Parking</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputPassword" class="control-label col-xs-4">High chairs</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputEmail" class="control-label col-xs-4">Internet</label>
<div class="col-xs-8">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputEmail" class="control-label col-xs-4">Play areas</label>
<div class="col-xs-8">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputPassword" class="control-label col-xs-4">TVs</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputPassword" class="control-label col-xs-4">Handicap accessible</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputEmail" class="control-label col-xs-4">Outdoor seating</label>
<div class="col-xs-8">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputPassword" class="control-label col-xs-4">Pets</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="col-xs-6 form-group">
<label for="inputPassword" class="control-label col-xs-4">Smoking areas</label>
<div class="col-xs-8">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form>
Related
I am using bootstrap 3 for my form design. i am using below structure.
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Age</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Class</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">School</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Subject</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Grade</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
</div>
<div class="col-md-6" id="monthData">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Monthly Amount</label>
<div class="col-sm-5">
<input type="text" class="form-control"/>
</div>
<div class="col-sm-4">
<input type="text" size="9" class="form-control" placeholder="No.of months">
</div>
</div>
</div>
</div>
This layout is working well. But problem is, sometimes i need to hide "monthData" division. When i hide it, there is a empty space right side of the row. how i avoid this.
As a solution i tried to change my layout as below.
<div class="row">
<div class="col-md-6">
form elements
</div>
<div class="col-md-6">
form elements
</div>
</div>
According to my solution, empty space issue is fixed. But Tab index is going up to down. but i need to left to right.
Can you help me to solve these issues. any one know better structure??
Add the tabindex attribute to the input with value in the required sequence.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="1">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Age</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="3" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Class</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="2" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">School</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="4" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Subject</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="5" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Grade</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="9" />
</div>
</div>
</div>
<div class="col-md-6" id="monthData">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Monthly Amount</label>
<div class="col-sm-5">
<input type="text" class="form-control" tabindex="6" />
</div>
<div class="col-sm-4">
<input type="text" size="9" class="form-control" placeholder="No.of months" tabindex="7">
</div>
</div>
</div>
</div>
I really need some help here. I've been messing with this form all day and I can't get these boxes to show where I need them to. I'll include a picture below of how I want it to look. I've been trying different things with form-inline and form-horizontal but it's just not working.
Any help would be appreciated.
Here's some of what I've been trying:
<form class="form-horizontal">
<div class="col-md-6">
<h4>Shipping Address</h4>
<hr>
</div>
<div class="col-md-6">
<h4>Contact Info</h4>
<hr>
</div>
<div class="col-md-12">
<div class="form-group row">
<label for="inputKey" class="col-md-2 control-label">First Name</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputKey" placeholder="First Name">
</div>
<label for="inputValue" class="col-md-3 control-label">Email Address</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputValue" placeholder="Email Address">
</div>
</div>
</div>
</form>
You just need to make sure you're using the correct rows/cols, and don't use form-horizonal along with the grid columns.
<form class="row">
<div class="col-md-6">
<h4>Shipping Address</h4>
<hr>
</div>
<div class="col-md-6">
<h4>Contact Info</h4>
<hr>
</div>
<div class="col-md-12">
<div class="form-group row">
<label for="inputKey" class="col-md-2 control-label">Key</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<label for="inputValue" class="col-md-2 control-label">Other</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-md-2 control-label">State</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputSt" placeholder="ST">
</div>
<div class="col-md-2">
<input type="text" class="form-control" id="inputZip" placeholder="Zip">
</div>
<label for="inputValue" class="col-md-2 control-label">Other</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</form>
http://www.codeply.com/go/e92EivkCaq
I have created a form using bootstrap. When it displays an error, the div block below the error shifts to right. How can this be fixed using CSS?
This is a screenshot of how it looks after an error is shown:
Code
https://jsfiddle.net/yzm2aj9j/#&togetherjs=Q8Bk7CaMjy
<form>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="username" class="col-md-6 control-label">User Name</label>
<div class="col-md-6">
<input type="text" class="form-control" id="username" placeholder="User Name">
</div>
<div class="col-xs-12" style="color:#ff5555;">
<span class="error">User Name Cannot Be Blank</span>
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="phone" class="col-md-6 control-label">Phone</label>
<div class="col-md-6">
<input type="text" class="form-control" id="phone" placeholder="phone">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
</form>
According to Bootstrap's Documentation:
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
If default grids are being used then rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).
You need to wrap two .col-xs-6 in one .row. Your code structure should be like this:
<div class="row">
<div class="col-xs-6">
// column content goes here...
</div>
<div class="col-xs-6">
// column content goes here...
</div>
</div>
<div class="row">
<div class="col-xs-6">
// column content goes here...
</div>
<div class="col-xs-6">
// column content goes here...
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="row">
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="username" class="col-md-6 control-label">User Name</label>
<div class="col-md-6">
<input type="text" class="form-control" id="username" placeholder="User Name">
</div>
<div class="col-xs-12" style="color:#ff5555;">
<span class="error">User Name Cannot Be Blank</span>
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="phone" class="col-md-6 control-label">Phone</label>
<div class="col-md-6">
<input type="text" class="form-control" id="phone" placeholder="phone">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
<div class="col-xs-6 col-md-6">
<div class="form-group ">
<label for="inputEmail" class="col-md-6 control-label">Email</label>
<div class="col-md-6">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
</div>
</div>
</form>
I have simple Bootstrap block which looks like this:
The main problem occurs on smaller resolution, like 1280*600:
As you can see the mos of the ip is not seen, so I want to set labes above the inputs like this:
<div class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-3 control-label" for="textinput" style="text-align:center">Server IP</label>
<div class="col-sm-4">
<input type="text" placeholder="Enter IP Address" class="form-control">
</div>
<label class="col-sm-1 control-label" for="textinput">Port</label>
<div class="col-sm-3">
<input type="text" placeholder="Enter Port" class="form-control">
</div>
</div>
</div>
I assume you mean 600x1280 rather than the other way round as 1280x600 is quite wide.
How about something like this..
<div class="form-horizontal" role="form">
<div class="form-group">
<div class="col-xs-7">
<div class="container-fluid">
<div class="row">
<label class="col-xs-12 col-sm-3 control-label" for="textinput" style="text-align:center">Server IP</label>
<div class="col-xs-12 col-sm-9">
<input type="text" placeholder="Enter IP Address" class="form-control">
</div>
</div>
</div>
</div>
<div class="col-xs-5">
<div class="container-fluid">
<div class="row">
<label class="col-xs-12 col-sm-3 control-label" for="textinput">Port</label>
<div class="col-xs-12 col-sm-9">
<input type="text" placeholder="Enter Port" class="form-control">
</div>
</div>
</div>
</div>
</div>
</div>
What is the correct way to style form with bootstrap in the following scenario:
I need to use fieldset (that will be styled later)
I need to divide form into two columns
Each column has label+control, some will have label+control1+control2 etc.
I am new to bootstrap. I have come to the following solution (jsfiddle).
The question is: is this the correct way to do this? Does it not violate the bootstrap semantics?
I do not understand when to use form-group, am I using it correctly?
Should I not include some class="row" here for correct semantics?
HTML:
<div class="container">
... <some content here> ....
<form class="form-horizontal">
<fieldset>
<legend>Portfolio</legend>
<div class="col-xs-6">
<div class="form-group">
<label for="name" class="col-xs-4 control-label">Label1</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control1" />
</div>
</div>
<div class="form-group">
<label for="name" class="col-xs-4 control-label">label2</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control2" />
</div>
</div>
<div class="form-group">
<label for="name" class="col-xs-4 control-label">label3</label>
<div class="col-xs-8 form-inline">
<div class="form-group col-xs-6">
<input type="text" class="form-control" placeholder="control1" />
</div>
<div class="form-group col-xs-6">
<input type="text" class="form-control" placeholder="control2" />
</div>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="name" class="col-xs-4 control-label">Label1</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control1" />
</div>
</div>
<div class="form-group">
<label for="name" class="col-xs-4 control-label">label2</label>
<div class="col-xs-8">
<input type="text" class="form-control" placeholder="control2" />
</div>
</div>
</div>
</fieldset>
</form>
</div>
I have seen all Bootstrap form examples, but I do not get how to separate form into two columns. I have also read the whole documentation, but I feel that this is not the right way how to use col and other classes.
Column separation happens inside container elements.
Each time you have an element you want to do grid inside it, give it class="container" and in it u can use the normal row and column classes.
Also check Bootstrap's out of the box form styles.
Below are the bare bones, add on to it what u need (like text align etc)
<form class="container">
<div class="row">
<div class="col-md-3">
<label for="username" class="control-label">label</label>
</div>
<div class="col-md-3">
<input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
</div>
<div class="col-md-3">
<label for="username" class="control-label">label</label>
</div>
<div class="col-md-3">
<input type="text" name="username" class="form-control" placeholder="Email address" autofocus>
</div>
</div>
</form>
I face this problem with bootstrap 4 and I found that whenever we want to divide inside our form into many columns we should use container and row class. because the bootstrap grid take its style from its parent (.container and .row)
see this example :
<main>
<div class="container-fluid mt-3">
<div class="row">
<form method="post">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="input-group">
<div class="col-md-3">
<label class="form-controllabel">Full Name</label>
</div>
<div class="col-md-9">
<input type="text" />
</div>
</div>
<div class="input-group">
<div class="col-md-3">
<label class="form-controllabel">fatherName</label>
</div>
<div class="col-md-9">
<input type="text" />
</div>
</div>
<div class="input-group">
<div class="col-md-3">
<label class="form-controllabel">LastName</label>
</div>
<div class="col-md-9">
<input type="text" />
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<div class="col-md-3">
<label class="form-controllabel">salary</label>
</div>
<div class="col-md-9">
<input type="text" />
</div>
</div>
<div class="input-group">
<div class="col-md-3">
<label class="form-controllabel">tax</label>
</div>
<div class="col-md-9">
<input type="text" />
</div>
</div>
<button type="submit">save</button>
</div>
</div>
</div>
</form>
</div>
</div>
</main>
I'am sure it will work!