I want to center align my form w.r.t. page, but if i use the following, only text input field is getting aligned but label remains at left. How to resolve it?
<div id="passCode"></div>
<form class="form-horizontal">
<fieldset>
<legend style="color:#145FAC">Please Fill in the Online Form</legend>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control formWidth" id="inputName" placeholder="Nam" />
</div>...</div>
</fieldset>
</form>
text-align: left is applied to control-label therefore it overrides "center" applied to the parent element. Try using this css below
.control-label, .form-control {
text-align: center;
}
Use this CSS for the form:
.form-horizontal {
margin: 0 auto;
width: 70%; //Change it according to the design.
}
Demo:http://jsfiddle.net/lotusgodkk/GCu2D/722/
You can use the center tag, since you want the label to be centered.
<center>
<div id="passCode"></div>
<div class="container "> <!--center_div or center-block-->
<form class="form-horizontal">
<fieldset>
<legend style="color:#145FAC">Please Fill in the Online Form</legend>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control formWidth" id="inputName" placeholder="Name" required>
</div>
</div>
</fieldset>
</form>
</div>
</center>
Bootstrap comes with a helper class .center-block. Try adding it to the label.
you could apply this CSS to form-control:
text-align: center !important;
text-align: -webkit-center !important
I have added Bootply sample to you please check this it may works for you http://www.bootply.com/wokazmuDbv
Related
I am using Squarespace and trying to move the margin of the first .field.text.three-digits using "nth-of-type", but I can't get it to work right.
CSS:
.form-item.fields.phone:nth-of-type(3) {
background-color: red;
margin-left: 20%;
}
HTML:
<fieldset id="phone-yui_3_17_2_1_1531771537607_16560" class="form-item fields
phone">
<div class="title">Phone</div>
<legend>Phone</legend>
<div class="field text three-digits" id="yui_3_17_2_1_1531936132691_509">
<label class="caption" id="yui_3_17_2_1_1531936132691_508"><input
class="field-element" x-autocompletetype="phone-area-code" type="text"
maxlength="3" data-title="Areacode" id="yui_3_17_2_1_1531936132691_507">
(###)</label>
</div>
<div class="field text three-digits">
<label class="caption"><input class="field-element" x-
autocompletetype="phone-local-prefix" type="text" maxlength="3" data-
title="Prefix">###</label>
</div>
<div class="field text four-digits">
<label class="caption"><input class="field-element" x-
autocompletetype="phone-local-suffix" type="text" maxlength="4" data-
title="Line">####</label>
</div>
</fieldset>
Thanks!
This code:
.form-item.fields.phone:nth-of-type(3)
Will apply the styles to the third element it finds with these three classes
form-item fields phone
If you want to modify the first instance of an element with the classes field text three-digits, your CSS should be something like this:
.field.text.three-digits:nth-of-type(2) {
background-color: red;
margin-left: 20%;
}
My current code is :
<div class="row" id="loginForm">
<p>Username : </p>
<input type="text" class="form-control input" id="usr">
</div>
This shows the input box in the next line, how can i display the p tag and the input box on the same line?
Paragraphs are usually displayed as a block of their own.
While you can change the styling of it to change that, what you have is not a paragraph, so you shouldn't mark it up with the p element.
Use a label element instead. Aside from being the correct markup, it is an inline element so will render on the same line by default.
<div class="row" id="loginForm">
<label for="usr">Username : </label>
<input type="text" class="form-control input" id="usr">
</div>
display: inline-block is your friend:
p {
display: inline-block;
}
<div class="row" id="loginForm">
<p>Username:</p>
<input type="text" class="form-control input" id="usr">
</div>
You can use table without border. So it looks very tasteful and easy.
<div class="row" id="loginForm">
<table border="0">
<tr>
<td><p>Username : </p></td>
<td><input type="text" class="form-control input" id="usr"></td>
</tr>
</table>
</div>
Use Bootstrap form-horizontal
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" for="usr">Username:</label>
<div class="col-sm-10">
<input type="text" class="form-control input" id="usr">
</div>
</div>
</form>
You can simply wrap your input into tag so you don't need to use for attribute.
HTML:
<div class="row" id="loginForm">
<label
>Username :
<input type="text" class="form-control input" id="usr">
</label>
</div>
CSS:
label {
display: block;
}
label > p {
display: inline-block;
}
You could just use a span tag,
<div class="row" id="loginForm">
<p>Username : <span><input type="text" class="form-control input" id="usr"></span></p>
</div>
with boostrap you only add class form-horizontal and this work for you
I have an html which contains 1 label and 1 div box contains a text.
<label class="control-label col-xs-2">Name:</label>
<div class="col-xs-10">
<strong>Test</strong>
</div>
But they seem not located on the same line. Here is the jsfiddle Could anyone help me how can I align them on the same line.
Thanks
I see you are using bootstrap. Bootstrap already has default CSS for labels. so if you don't want that to happen remove the padding from the <label> element.
It will look like this:
.form-horizontal .control-label {
float: left;
width: 160px;
/* padding-top: 5px; */
text-align: right;
}
Hope this helps, Cheers.
Apply padding-top to the col-xs-10 in your CSS.
.col-xs-10 {
padding-top: 5px;
}
Try this
<div class="form-horizontal" role="form">
<div class="form-group">
<label class="control-label col-xs-2">Name:</label>
<div class="col-xs-10">
<strong>Test</strong>
</div>
</div>
</div>
In bootstrap if you would like to have a horizontal form it is called inline. So, if you change your "form-horizontal" to "form-inline" you will achieve that horizontal key/value pair. Below is the html that I changed to your code. I hope this is what you are looking for.
<div class="form-inline" role="form">
<div class="form-group">
<label for="control-label col-xs-12">Name:</label>
<input type="text" class="form-control col-xs-10" id="control-label"placeholder="text here">
</div>
</div>
In addition, you will notice that I have inserted an input tag. This is what will allow site visitors to input the value.
I want to add "month" after the input in bootstrap, in the side of it.
I've tried span, pull-left nothing worked. Months is always below
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Months</label>
<input type="email" class="form-control" style="width: 50%" id="exampleInputEmail1" placeholder="Months"> months
</div>
</form>
JSFIDDLE
Just add form-inline to your form..
<form role="form" class="form-inline">
<div class="form-group">
<label for="exampleInputEmail1">Months</label>
<input type="email" class="form-control" style="width: 50%" id="exampleInputEmail1" placeholder="Months"> months
</div>
</form>
Demo: http://www.bootply.com/119625
Try wrapping the elements and specifying the column widths:
HTML
<form role="form">
<div class="form-group">
<div class="pull-left col-xs-9">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<span class="col-xs-3">months<span>
</div>
</form>
CSS
span{
margin-top: 25px;
}
JS Fiddle: http://jsfiddle.net/7rYp7/2/
putting style="display:inline" into the actual input element in question has worked for me.
Listen, I know we are supposed to avoid using style and only use classes defined in CSS but I tried all the example above and this is the only thing that worked.
You can set the following in your CSS (overwriting the bootstrap.css)
.form-group input {
display:inline;
width: 50%;
margin: 5px;
}
You can also use a different selector to be more specific (instead of overwriting it for all inputs) UPDATED:
#exampleInputEmail1{
display:inline;
width: 50%;
margin: 5px;
}
.form-group label {
display: block;
}
I have the following code and I'm trying to get both of these inputs aligned centered. Where is the problem in the code?
<div class='form'>
<form class="form-inline" role="form">
<div class="text-center input-group input-group-lg">
<span class="input-group-addon">#</span>
<input class="text-center form-control" align="middle" placeholder="username" name="username" type="text">
</div>
<div class="text-center input-group input-group-lg">
<span class="input-group-addon">P</span>
<input class="text-center form-control" align="middle" placeholder="password" name="password" type="password">
</div>
</form>
</div>
<style>
.text-center {
width: 50%;
}
div {
text-align:center;
}
</style>
Both inputs are still aligned to the left.
Inputs are not text, and cannot be centered using text-align. Target the element directly in your css, like so:
input {
display: block;
margin: 0 auto;
}
This will center the inputs within the parent element.