offset class not applied into a bootstrap 2 form - css

Question

should be an easy one.
Why does the offsetX class not work on the 2 last divs?
<form class="bs-docs-example" style="padding-bottom: 15px;padding-top: 15px;">
<div class="controls ">
<input class="span12" type="text" placeholder=".span12">
</div>
<div class="controls controls-row ">
<input class="span4" type="text" placeholder=".span4">
<input class="span8" type="text" placeholder=".span8">
</div>
<div class="controls controls-row ">
<input class="span9" type="text" placeholder=".span9">
<input class="span3" type="text" placeholder=".span3">
</div>
<div class="controls controls-row ">
<input class="span6" type="text" placeholder=".span6">
<input class="span6" type="text" placeholder=".span6">
</div>
<div class="controls controls-row ">
<input class="span4" type="text" placeholder=".span4">
<input class="span6 offset2" type="text" placeholder=".span6 offset2">
</div>
<div class="controls controls-row ">
<input class="span4 offset2" type="text" placeholder=".span4 offset2">
<input class="span6 " type="text" placeholder=".span6 ">
</div>
</form>
can be tested here: http://jsfiddle.net/b0zqnmbL/

Answer 1

You need to assign the offset-* classes to the parent since offset with input span elements is being overridden by the Bootstrap rule below.
input[class*="span"] { margin-left: 0; }
Since you need to retain the control classes and also in the same line, I have modified the markup and also added a media query.
Modified code:
<div class="controls controls-row ">
<input class="span4" type="text" placeholder=".span4">
</div>
<div class="controls controls-row offset2">
<input class="span6" type="text" placeholder=".span6 offset2">
</div>
<div class="controls controls-row offset2">
<input class="span4" type="text" placeholder=".span4 offset2">
</div>
<div class="controls controls-row ">
<input class="span6 " type="text" placeholder=".span6 ">
</div>
#media (min-width: 768px) {
.controls-row {
display: inline-block;
}
}
Updated JSfiddle

Answer 2

Use
<div class="offset2">
<input class="span6" type="text" placeholder=".span6 offset2">
</div>
instead of
<input class="span6 offset2" type="text" placeholder=".span6 offset2">
UPDATE:
It's behaving funny.
I got it working by the following code:
I know It's not the exact answer but if you can get away with it meanwhile ;)
<form class="bs-docs-example" style="padding-bottom: 15px;padding-top: 15px;">
<div class="controls ">
<input class="span12" type="text" placeholder=".span12">
</div>
<div class="controls controls-row ">
<input class="span4" type="text" placeholder=".span4">
<input class="span8" type="text" placeholder=".span8">
</div>
<div class="controls controls-row ">
<input class="span9" type="text" placeholder=".span9">
<input class="span3" type="text" placeholder=".span3">
</div>
<div class="controls controls-row ">
<input class="span6" type="text" placeholder=".span6">
<input class="span6" type="text" placeholder=".span6">
</div>
<div class="controls controls-row">
<input class="span4" type="text" placeholder=".span4">
<div class="span2" ></div>
<div class="offset2">
<input class="span6" type="text" placeholder=".span6 offset2">
</div>
</div>
<div class="controls controls-row">
<div class="offset2">
<input class="span4" type="text" placeholder=".span4 offset2">
</div>
<input class="span6 " type="text" placeholder=".span6 ">
</div>
</form>
Or I would suggest an alternative if you're not very much strict on using offset2 only:
<div class="controls controls-row">
<input class="span4" type="text" placeholder=".span4">
<div class="span2" ></div>
<input class="span6" type="text" placeholder=".span6 offset2">
</div>
<div class="controls controls-row">
<div class="span2"></div>
<input class="span4" type="text" placeholder=".span4 offset2">
<input class="span6 " type="text" placeholder=".span6 ">
</div>

Answer 3

Not elegant at all, but so far I get better results than Megh Vidani and Manoj Kumar's solutions:
...
<div class="controls controls-row">
<input class="span4" type="text" placeholder=".span4">
<label class="span2" ></label>
<input class="span6" type="text" placeholder=".span6 offset2">
</div>
...
Ugly but 100% efficient.
All feel free to post more elegant solutions.