CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrapradio-button
user5432375
user5432375

Reputation:

How can I horizontally align bootstrap 3 radio and the radio's label?

<form class="form-horizontal">
  <label class="control-label in-line">Lover gender</label>
  <label class="radio-inline">
    <input type="radio" value="option1"> Male
  </label>
  <label class="radio-inline">
    <input type="radio" value="option2"> Female      </label>                       
</form>

Please also explain you answers.

Upvotes: 0

Views: 2752

Answers (2)

Ezra Free
Ezra Free

Reputation: 754

You'll want to use <form class="form-inline"> for inline forms:

http://getbootstrap.com/css/#forms-inline

There's also helper classes for inline radios:

http://getbootstrap.com/css/#checkboxes-and-radios

Here's an example on Bootply that shows what you're trying to do:

http://www.bootply.com/BCSk79TPOS

The code used is:

<form class="form-inline">
  <div class="radio-inline">
    <label for="option1">
      <input type="radio" id="option1"> Option 1
    </label>
  </div>
  <div class="radio-inline">
    <label for="option2">
      <input type="radio" id="option2"> Option 2
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Upvotes: 1

designarti
designarti

Reputation: 629

The <label> tag defines a label for an <input> element. Your first label doesn't define anything.

But, anyway, if you still want to use it, give it the same default Bootstrap class as the others below "radio-inline". I think checkbox-inline works as well. You just have to define the same CSS for all the labels in there. .radio-inline class has some properties, different from the default browser properties for the stand-alone label element. That's why goes on a different line.

Hope this is the answer you were looking for.

Upvotes: 0

Related Questions