CODEWITHSUNDEEP
csstwitter-bootstrap
EML
EML

Reputation: 10281

Bootstrap 3: vertical alignment of inline radios

When creating inline radios in a form-horizontal, is there any way to vertically align the radio buttons? fiddle here - note that button 'EF' is below button 'B', but is offset to the right - I'd like it to be directly below 'B'. I can mess around with padding but I'd rather use the grid if possible. Thanks.

Upvotes: 0

Views: 401

Answers (2)

rockStar
rockStar

Reputation: 1296

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    option two
  </label>
</div>

Bootply here

Upvotes: 1

SW4
SW4

Reputation: 71160

Demo Fiddle

The issue here is that you are effectively placing two columns of content within a single Bootrap column (col-sm-4), you either want to split the radio buttons into separate columns, or apply a set width to them so it is consistent across rows. Try adding:

label{
    width:46%;
}

Upvotes: 1

Related Questions