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.

Twitter Bootstrap Modal Won't Load Content from Another ("Remote") Page

Short answer

You apparently need a skeleton [modal ... modal-body ... /modal] for your data-target, not just an empty modal with the data-target.

A Programmer's False Assumptions - The API is Broken or Old

Initially, I was concerned that my Rails plugin wasn't using a version of Bootstrap that didn't include the remote loading of a page into the modal (via href attribute). That functionality has only existed since 2.0.4.

However, when I checked the script being loaded into the project against the current bootstrap-modal.js on github, the MODAL DATA-API section was the same. Repeated checks of the javascript being loaded into my project confirmed that the code was up-to-date enough.

Maybe a Little Too Helpful

The forums discussing how to load remote content into a Bootstrap Modal suggested that the data-target div could be empty:
Original calling page sample:
The contents of the calling page div never changed.


"Remote" page sample

...extra code here...

...extra code here...

What Was Really Happening

The documentation states that, "If a remote url is provided, content will be loaded via jQuery's load method and injected into the .modal-body."

From there, I put a stub modal-body in my calling page's modal and discovered that modal-header, modal-body, and modal-footer appeared to be getting replaced now!
New calling page: