I would like to align vertically all my inputs, how can I do it ?
Cause label can be very long and I want that alignemnt still perfect.
CSS
.span6{
overflow:hidden;display:inline;
}
.span6 label, .span6 input {
display:inline-block;
}
.span6 input {
width:70%;
margin-left:3%;
}
HTML
<div class="row-fluid">
<form class="form well">
<div class="row-fluid">
<div class="control-group span6">
<label for="first-name">Company</label>
<input class="first-name" type="text" class="input-block-level" />
</div>
<div class="control-group span6">
<label for="last-name">Title</label>
<input class="last-name" type="text" class="input-block-level" />
</div>
<div class="control-group span6">
<label for="last-name">Country</label>
<input class="last-name" type="text" class="input-block-level" />
</div>
</div>
</div>
</div>
JSFIDDLE
http://jsfiddle.net/kY5LL/154/
You should probably read a bit more the Bootstrap documentation, there is built-in styles for aligning forms horizontally and vertically.
I modified your code to use the horizontal style (.form-horizontal).
http://jsfiddle.net/LeBen/kY5LL/156/
Related
can anyone please give me an example of fixed px size and what is the use of it.
and also can u please help me wrapping those input and labels inside a div element and making the box different sizes
<label for="Year">Year :</label>
<input type="text" id="Year" name="year" placeholder="(YYYY)">
<label for="LicencePlate">Licence Plate:</label>
<input type="text" id="LicencePlate" name="licencePlate" placeholder="LicencePlate">
<label for="DateBooked">Date Booked:</label>
<input type="text" id="DateBooked" name="dateBooked" placeholder="24/10/2017">
<label for="TimeBooked">Time Booked:</label>
<input type="text" id="TimeBooked" name="timeBooked" placeholder="14:00">
#container .subcontainer .label{
display:inline-block;
width:100px
}
#container .subcontainer .input{
display:inline-block;
width:200px;
}
#container .subcontainer{
padding:5px;
}
<div id='container'>
<div class='subcontainer'>
<div class='label'><label for="Year">Year :</label></div>
<div class='input'><input type="text" id="Year" name="year" placeholder="(YYYY)"></div>
</div>
<div class='subcontainer'>
<div class='label'><label for="LicencePlate">Licence Plate:</label></div>
<div class='input'><input type="text" id="LicencePlate" name="licencePlate" placeholder="LicencePlate"></div>
</div>
<div class='subcontainer'>
<div class='label'><label for="DateBooked">Date Booked:</label>
</div>
<div class='input'><input type="text" id="DateBooked" name="dateBooked" placeholder="24/10/2017"></div>
</div>
<div class='subcontainer'>
<div class='label'><label for="Year">Year :</label></div>
<div class='input'><input type="text" id="Year" name="year" placeholder="(YYYY)"></div>
</div>
<div class='subcontainer'>
<div class='label'><label for="TimeBooked">Time Booked:</label>
</div>
<div class='input'><input type="text" id="TimeBooked" name="timeBooked" placeholder="14:00"></div>
</div>
</div>
I hope above code will help you.
can anyone please give me an example of fixed px size
Here is a box with a described size.
element {
width: 20px;
height: 20px;
background: red;
}
and what is the use of it.
To tell the browser how to display the element
and also can u please help me wrapping those input and labels inside a div element and making the box different sizes
An example of how you should markup and style lists of input fields
https://jsfiddle.net/sheriffderek/at2m1r6v/
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 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.
Using Bootstrap version 2.3.2, I have a form layout like the below image and since the checkbox has an inline label, there is an aligning issue.
Adding margin to input[type="checkbox"] only gives margin to the checkbox, not the inline label. How do I make it so the checkbox and its label vertically align to the text fields next to it?
Here is the
JS BIN if you are interested.
In your HTML add a class that will handle the checkbox margin:
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<label>label 1</label>
<input type="text" />
</div>
<div class="span3">
<label>label 2</label>
<input type="text" />
</div>
<div class="span3 checkbox">
<input type="checkbox" />test description
</div>
</div>
</div>
and in your CSS:
input[type="checkbox"] {
// i just remove this part..
}
.checkbox {
margin: 30px 0 0 0;
}
Don't put the margin on the checkbox, but on the parent div.
Check this jsFiddle.
Hope this helps
Try to always use something like this:
<div class="span3">
<label for="checkbox" class="checkbox">
<input type="checkbox" id="checkbox" class="checkbox">test description
</label>
</div>
http://jsbin.com/itAdAWA/1/edit
How about putting a <label> before the checkbox like this? ..
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<label>label 1</label>
<input type="text">
</div>
<div class="span3">
<label>label 2</label>
<input type="text">
</div>
<div class="span3">
<label>test</label>
<input type="checkbox">
</div>
</div>
</div>
Bootply: http://bootply.com/86998
I just solved this exact problem in bootstrap 3, by simply limiting the height of inline checkboxes to 12 pixels. They are by default 40px, I don't know why !
<div class="checkbox-inline">
<label>
<input type="checkbox" checked="checked" />
<span>My correctly aligned check-box</span>
</label>
</div>
add this in your css file (I personally have a css file named bootstrap-custom.css):
/*
Checkboxes in inline forms are misaligned because for an unknow reason they inherit a height of 40px !
This selector limit the height of inline checkboxes to 12px which is the perfect value to align them to
the other widgets in an inline form.
*/
.radio-inline, .checkbox-inline {
max-height: 12px;
}
Not ideal solution but change your code to ...
<div class="span5">
<input type="checkbox">test description</input>
</div>
and set the margin-top on that. I will result as you want - better.
Bootstrap v5+
<!-- mt-md-4 pt-md-3 this apply margin and padding only for desktop -->
<div class="col-md-3 mb-3 md-mt-4 md-pt-3">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
I have an HTML code as follows
<body>
Hello UserName:<input tyep="text"/><br/>
Pass:<input type="text"/>
</body>
I want the two text fields should be aligned in such a way that their left borders should start from the same positions of two lines.Because as it is if I runs the two text fields starts exactly after their labels ends, which I don't want as it looks odd.
How would I do that?
Take a look at this example with Chrome Developer Tools or Firebug.
HTML:
<div class="main">
<div class="field">
<label for="n">Name</label>
<input type="text" name="n" />
</div>
<div class="field">
<label for="ln">Surnemt</label>
<input type="text" name="ln" />
</div>
<div class="field">
<label for="a">Bithplace</label>
<input type="text" name="a" />
</div>
</div>
CSS:
body {font-size:14px;}
label {float:left; padding-right:10px;}
.field {clear:both; text-align:right; line-height:25px;}
.main {float:left;}