Bootstrap dropdown rendering wrong in Meteor.js / Iron

Question

I'm trying to make a dropdown menu with Bootstrap on a Meteor.js/Iron project. For some reason the second instance of class="dropdown-header" is getting rendered outside the dropdown-menu.

Here's a pic: Click me

The same code works fine and renders correctly when run independently.

Has anyone else had issues such as this? Using Bootstrap 3.3.5 and Meteor 1.2

        <ul class="dropdown-menu">                 
            <li class="dropdown-header">Header</li>
            <li>
                <div class="col-sm-12">
                    <div class="btn-group" role="group">
                        <button class="btn btn-primary">Add</button>
                        <button class="btn btn-success">Edit</button>
                    </div>
                </div>
            </li>
            <li class="dropdown-header">Why am I here???????</li>
            <li>
                <div class="col-sm-12">
                    <div class="btn-group" role="group">
                        <button class="btn btn-primary">Add</button>
                        <button class="btn btn-success">Edit</button>
                    </div>
                </div>
            </li>
        </ul>

Answer 1

Try to create another ul for the second dropdown:

<ul class="dropdown-menu">                 
    <li class="dropdown-header">Header</li>
    <li>
        <div class="col-sm-12">
            <div class="btn-group" role="group">
                <button class="btn btn-primary">Add</button>
                <button class="btn btn-success">Edit</button>
            </div>
        </div>
    </li>
  </ul>
 <ul class="dropdown-menu">                 
    <li class="dropdown-header">Why am I here???????</li>
    <li>
        <div class="col-sm-12">
            <div class="btn-group" role="group">
                <button class="btn btn-primary">Add</button>
                <button class="btn btn-success">Edit</button>
            </div>
        </div>
    </li>
  </ul>