When I change the to at at line one. I get the following alignment.
I have got only the input boxes aligned "center" but not the labels. Sorry, I couldn't upload the screenshot here.
I have tried also with all the next nested div until form tag. But there is no use.
Can anybody help to align my form?
<body>
<div class="container">
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Ajouter un employé</legend>
<!-- Select Basic -->
<div class="control-group">
<label class="control-label" for="selectbasic">Titre</label>
<div class="controls">
<select id="selectbasic" name="selectbasic" class="input-small">
<option>M.</option>
<option>Mme.</option>
</select>
</div>
</div>
<!-- Text input-->
<div class="control-group">
<label class="control-label" for="prenom">Prénom</label>
<div class="controls">
<input id="prenom" name="prenom" type="text" placeholder="Prénom" class="input-xlarge" required="">
</div>
</div>
</fieldset>
</form>
</div>
</body>
I have tried also for each div of label and input tags. But it's not getting aligned center. I am totally stuck. Can anybody please pay attention to my post?
Related
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.
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'm styling this page and yet I can't seem to access either .4thForm or .3rdForm to style. These elements move responsively when screensize drops below 1024px so it's cruitial that I access these elements.
I've tested the #media call and I can change the colour .frontbannertitle with it so I know it's not the media call. Using inspector I can code the element to achieve what I would like, but it will not let me generate a css element to style it.
I need to edit this div to provide it with a negative margin-top value, as that cannot be achieved by targeting the select within the div.
Jsfiddle: http://jsfiddle.net/P49ja/
<form class="frontbannercontainer form-horizontal">
<fieldset class="frontbanner">
<h1 class="frontbannertitle">Enquire Now!</h1>
<div class="control-group">
<div class="controls">
<input id="textinput1" class="frontbannertext input-xlarge" type="text" name="textinput">
</div>
</div>
<div class="control-group">
<div class="controls">
<input id="textinput2" class="frontbannertext input-xlarge" type="text" name="textinput">
</div>
</div>
<div class="control-group">
<div class="controls 3rdForm">
<input id="textinput3" class="frontbannertext input-xlarge" type="text" name="textinput">
</div>
</div>
<div class="control-group">
<div class="controls 4thForm">
<select id="selectbasic" class="frontbannerselect input-xlarge" name="selectbasic">
<option selected="selected" disabled="disabled" value="0">Select Membership</option>
<option value="1">Individual Membership</option>
<option value="2">Corporate Membership</option>
</select>
</div>
</div>
<div id="SliderFormPhone">
<span id="ques">Enquire By Phone:</span>
<span id="ph">(02) 000 000</span>
</div>
<div class="control-group">
<div class="controls">
<button id="singlebutton" class="frontbannerbutton btn btn-primary" name="singlebutton">Apply!</button>
</div>
</div>
</fieldset>
</form>
Thanks!
DEMO
You can not start a class with a number in your case it's .4thForm
Change it to something like .Form4th
I think you cannot use "3rdForm" as a valid class selector.
The first character cannot be numeric.
Refer to this SO answer.
I added "thirdForm" as a class to your fiddle and was able to style it properly. So I'm assuming that is the issue.
you need to add special character "\3" to access this class like below..
.\34thform{
display:none;
margin-top:-7em;
}
sample jsfiddle below...
http://jsfiddle.net/P49ja/4/
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