I have a form and I want to keep 2 or 3 controls in line in the same row, for example:
label1
r1_ctrl1 r1_ctrl2 r1_ctrl3
label2
r2_ctrl1 r2_ctrl2 r2_ctrl3
I tried to do it this way:
<form class="form-horizontal" role="form">
<label...>
<div class="form-group">
<select .../>
<a ... />
</div>
</form>
and it does not work.
I also tried:
<form class="form-horizontal" role="form">
<label...>
<div class="form-group">
<div class="controls form-inline"
<select .../>
<a ... />
</div>
</div>
</form>
And also no result.
The only working method is Html table, but the result is really ugly. Please advise.
If you want controls on the same row you shouldn't use:
.form-horizontal
but
.form-inline
http://getbootstrap.com/css/#forms-inline
This is what .form-horizontal does:
Individual form controls automatically receive some global styling. All textual , , and elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.
And this is what .form-inline does:
Add .form-inline to your for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
I would take advantage of Bootstrap's flexible grid layout:
<div class="row">
<form>
<div class="col-xs-12">
<h3>Heading 1</h3>
</div>
<div class="col-xs-4 form-group">
<label for="input1">
<input id="input1" class="form-control" value="Control 1"></input>
</label>
</div>
<div class="col-xs-4 form-group">
<label for="input2">
<input id="input2" class="form-control" value="Control 2"></input>
</label>
</div>
<div class="col-xs-4 form-group">
<label for="input3">
<input id="input3" class="form-control" value="Control 3"></input>
</label>
</div>
</form>
</div>
Demo
Notice that I've changed your label to a heading. Each input should have its own label (with an appropriate for attribute) for accessibility. In this demo, the for attributes aren't strictly necessary as the labels wrap the inputs.
Related
Trying to align two form elements side by side to create an hours per week field
e.g
Hours per week (box here) - (box here)
but when I use two col-md-2 with a - between them I get the result of
Hours per week (box here) (box here) -
Anyone have a solution to display the - between the two boxes? I've tried using 3 col-md-1 but the alignment gets all out of whack!
The below code follows Bootstrap form construction. Using .input-group allows you to nest .input-group-addon between to fields with the .form-control class - though you do need to specify a width (hence the .col-xs-9).
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="form-group">
<label class="col-xs-3 control-label" for="HoursPerWeek">Hours Per Week</label>
<div class="col-xs-9">
<div class="input-group">
<input type="text" id="BoxOne" class="form-control">
<span class="input-group-addon">-</span>
<input type="text" id="BoxTwo" class="form-control">
</div>
</div>
</div>
</form>
Solution without the bootstrap grid
<form class="inline">
<div>
<label for="HoursPerWeek">Hours Per Week</label>
<input type="text" id="BoxOne">
<label for="#">-</label>
<input type="text" id="BoxTwo">
</div>
</form>
Solution using the bootstrap grid
<form>
<div class="form-group">
<label class="col-md-3" for="HoursPerWeek">Hours Per Week</label>
<input class="col-md-3" type="text" id="BoxOne">
<label class="col-md-3" for="#">-</label>
<input class="col-md-3" type="text" id="BoxTwo">
</div>
</form>
I have changed from Bootstrap 3.0.0 to 3.2.0 this morning because I needed some of the new features for my web application. Everything seemed to work as expected until I observed an issue with the vertical alignment of checkboxes in a .form-horizontal form.
An example is available at http://www.bootply.com/AYN64feYze. The markup for this minimum example is:
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">With label text</label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> label text
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Without label text</label>
<div class="col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">
</label>
</div>
</div>
</div>
</div>
If a checkbox has no following text it is shifted below the row it should appear in.
Is there a solution to this problem? Since I already have the leading label I do not need a following text for my checkboxes. My current workaround is adding text to the <label> that contains the <input type="checkbox"> and use the background color as the font color to hide the text.
Thank you for your help.
I'm not sure if this will affect the rest of your form layout, but the issue seems to be resolved if you change the display attribute of <label> (currently set to inline-block) to:
label{
display:inline;
}
Here's an updated Bootply. Hope this helps! Let me know if you have any questions.
This worked for me:
<div class="form-group">
<div class="col-lg-3">
<label class="pull-right" for="MyCheckBox">My Checkbox</label>
</div>
<div class="col-lg-9">
<input type="checkbox" name="MyCheckBox">
</div>
</div>
First, I had to remove the <div class='checkbox'> element. I then made the following changes to the checkbox label element:
Place the label in its own column div <div class="col-lg-3"></div>
Remove class="control-label"
Add class="pull-right".
I ended up with a checkbox that aligned with the other inputs horizontally and with its label vertically.
If you don't need following text for the checkboxes, why not just remove the <label> surrounding the checkboxes. Like so.
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="check1">With label text</label>
<div class="col-sm-10">
<div class="checkbox">
<input type="checkbox" id="check1">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="check2">Without label text</label>
<div class="col-sm-10">
<div class="checkbox">
<input type="checkbox" id="check2">
</div>
</div>
</div>
</div>
This code appeared to work in your Bootply when I tried it.
And remember if you have a label to use the for attribute for screen readers and to make it easier for your users (they can just click the label instead of the checkbox).
I am building an inline form with Bootstrap 3 and I can't figure out how to keep the inputs from overlapping. I hope you can see from the screenshot that the third input is overlapping the second and the fourth in overlapping it. How can I get them to align next to each other?
Here are the main parts of the html;
<div class="form-inline">
<div class="form-group">
<input class="form-control addon-input" id="units" name="units" placeholder="units" value="30" type="text">
</div>
<div class="form-group">
<input class="string optional form-control addon-input" id="unit_price" name="unit_price" placeholder="unit price" type="text">
</div>
</div>
I am making a form with bootstrap. I understand I would need to use the form-horizontal class if I want to use horizontal labels for the entire form. However, in my case, I need a few inputs to have horizontal labels, while others have normal labels without the inline labels (with a break)
The basic code I use is the bootstrap code using the control groups as below.
<form>
<div class="control-group">
<label class="control-label">Label_name1</label>
<div class="controls">
<input type="text" >
</div>
</div>
<div class="control-group">
<label class="control-label">Label_name2</label>
<div class="controls">
<input type="text" >
</div>
</div>
<div class="control-group">
<label class="control-label">Label_name3</label>
<div class="controls">
<input type="text" >
</div>
</div>
</form>
What I want
Label_Name1 : [___________] (Input box inline)
Label_Name2 : [__________________________] (Input box inline)
Label_Name3:
[___________________________] (Input box on next line)
if I use the form-horizontal class
<form class = "form-horizontal">
What i get
Label_Name1 : [___________] (input box inline)
Label_Name2 : [__________________________] (Input box inline)
Label_Name3: [___________________________] (Input box inline again - not what i want)
If I do not use the form horizontal class, what i get is this
Label_Name1 :
[___________] (Input box on next line - not correct)
Label_Name2 :
[__________________________] (Input box on next line- not correct)
Label_Name3:
[___________________________] (Input box on next line)
Is there anyway I can customize the control group to set the horizontal / inline labels to each control group instead of using the form-horizontal class?
You could try something like this. Also, control-group isn't a Bootstrap class.
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2">Label 1</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2">Label 2</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-2">Label 3</label>
<div class="col-sm-12"><input type="text" class="form-control"></div>
</div>
</form>
Demo: http://bootply.com/108060
When appending an input-group to a form-inline, the input-group appears below the form on a "new line" instead of inline with the other controls.
It seems that this is because the input-group wrapper class has display set to table whereas the other inputs, which work fine, have their display set to inline-block. Of course, it is not possible to give the input-group the inline-block display because its child add-on span, which has display: table-cell, needs the property of the parent to align correctly.
So my question is: is it possible to use input-group inside an inline form using Bootstrap classes exclusively? If not, what would be the best work-around allowing the use of custom classes.
Here is a demo illustrating my point. The code is the following:
<form action="" class="form-inline">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
<input type="text" class="form-control" placeholder="Text Inputs" style="width: 120px;"/>
<div class="checkbox">
<label>
<input type="checkbox" /> and Checkboxes
</label>
</div>
<select class="form-control" style="width: 150px;">
<option>and Selects</option>
</select>
<button type="submit" class="btn btn-default">and Buttons</button>
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</form>
This was indeed a bug and was resolved (check the issue on github for more info).
From now on the inline forms in BootStrap require to wrap the child form controls with .form-group.
So my code would become:
<form action="" class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="Works with" style="width: 100px;"/>
</div>
...
<div class="form-group">
<div class="input-group" style="width: 220px;">
<span class="input-group-addon">BUT</span>
<input type="text" class="form-control" placeholder="not with input-groups" />
</div>
</div>
</form>
I think you may need to separate your form into columns to get the inline layout you want. An example (I think of what you're after) is on the Bootstrap site here.
try putting
<div class="col-lg-1"></div>
around your controls to see what I mean. You of course need to work in columns of 12 so this will need to be adjusted accordingly.