Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

by Alexey Demin

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <h4>Default interaction:</h4>
      <br>
      <div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
        </ul>
      </div>
      <br>
      <p>
        Clicks inside <code>.dropdown-menu</code> closes menu
      </p>
    </div>
    <div class="col-xs-6">
      <h4>Custom interaction:</h4>
      <br>
      <div class="dropdown keep-inside-clicks-open">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
        <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
        </ul>
      </div>
      <br>
      <p>
      Clicks inside <code>.dropdown-menu</code> does <strong>NOT</strong> close menu,
      but clicking outside of it or pressing ESC still works as normal.
      </p>
    </div>
  </div>
</div>

CSS

body { margin: 10px; }

JavaScript

$(document).on('click.bs.dropdown.data-api', '.dropdown.keep-inside-clicks-open', function (e) {
  e.stopPropagation();
});