<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div> <h2>Multi level dropdown menu in Bootstrap 3</h2> <hr> <div class="dropdown"> <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html"> Dropdown <span class="caret"></span> </a> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu"> <li role="presentation" class="dropdown-header"> Today </li> <li class="reminder"> <div class="detail"> <h3>Chow Vincent (5/15/1966)</h3> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> </div> <div class="action"> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-calendar"></span> </button> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-remove"></span> </button> </div> </li> </ul> </div> </div> </div>

.dropdown ul { border: solid 0px red; } .dropdown ul>li.reminder { border: solid 0px blue; padding-bottom: 3px; padding-top: 8px; } .dropdown ul>li.reminder .detail { border: solid 0px orange; width: 86%; display: inline-block; padding-left: 5px; } .dropdown ul>li.reminder .action { border: solid 0px green; width: 12%; display: inline-block; vertical-align: top; }