Bootstrap 3 radio-inline and checkbox-inline elements running together.


I was having issues with Bootstrap 3 radio buttons running together even though the labels had a “radio-inline” attribute.

After examining the layout of the html being generated, I realized that each individual label and radio button was being wrapped in its own containing element (in this case, a “td” element.)

The reason for this is the following CSS:

.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline {
  margin-top: 0;
  margin-left: 10px;
}

If the .radio-inline elements aren’t adjacent to each other, the ‘margin-left’ value will not trigger.

Unfortunately, it took a little too long to track down the source of the issue, but now I know.


%d bloggers like this: