Alternate HTML Styling in Bootstrap Horizontal Form - css

Question

I have some forms which mostly consist of input controls, but there are times when the horizontal form has a variant like the following:
<div class="form-group">
<span class="col-md-3 control-label">Features</span>
<div class="col-md-9">
<span>This is not available.</span>
</div>
</div>
Or sometimes I have multiple controls:
<span class="col-md-3 control-label">Payment</span>
<div class="col-md-9">
<input value="2" name="CustomerPaymentOption" type="radio">
<span>Credit Card</span>
</div>
The label content doesn't quite line up at the same level as the control-label. I've tried to mimic the css class for form-control to get span content to line up, but it never quite worked out so well in my scenarios. Any recommendations on getting the content to line up?

Answer 1

If you just want to print a static text you could use a static form control (http://getbootstrap.com/css/#forms-controls-static).
If you want to use multiple checkboxes and radio buttons, you can also use what bootstrap provoides. See http://getbootstrap.com/css/#forms-controls.
Would you like to have something like this? http://www.bootply.com/ztbj1dCJrP

Answer 2

Its Simple add class to the div (here my-label)
<span class="col-md-3 control-label">Payment</span>
<div class="col-md-9 my-label">
<input value="2" name="CustomerPaymentOption" type="radio">
<span>Credit Card</span>
</div>
and css
.my-label{
display:inline-block;
}
fiddle http://jsfiddle.net/harshdand/a4n4nc1r/
for multiple http://jsfiddle.net/harshdand/a4n4nc1r/2/