CODEWITHSUNDEEP
csshtmltwitter-bootstraptwitter-bootstrap-3
Brian Mains
Brian Mains

Reputation: 50728

Alternate HTML Styling in Bootstrap Horizontal Form

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?

Upvotes: 0

Views: 830

Answers (2)

Harsh
Harsh

Reputation: 1072

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/

Upvotes: 0

Thylossus
Thylossus

Reputation: 302

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

Upvotes: 1

Related Questions