<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
<p>This demo uses a min of 3 and max of 5 selections along with a callback to alert the selected values.</p>
</div>
<div class="container">
<a href="#" class="fetch-values pull-right">Fetch values</a>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Your skills
<span class="caret"></span></button>
<ul id="my-checklist" class="dropdown-menu checklist">
<li data-value="JS" class="checked"><a href="#">Vanilla JS</a></li>
<li data-value="Node" class="checked"><a href="#">Node.js</a></li>
<li data-value="jQuery" class="checked"><a href="#">jQuery</a></li>
<li data-value="Bootstrap"><a href="#">Twitter Bootstrap</a></li>
<li data-value="PHP" class="checked"><a href="#">Vanilla PHP</a></li>
<li data-value="Drupal"><a href="#">Drupal</a></li>
<li data-value="Larvel"><a href="#">Larvel</a></li>
<li data-value="Symfony"><a href="#">Symfony</a></li>
<li data-value="Composer"><a href="#">Composer</a></li>
<li role="separator" class="divider"></li>
<li class="text-center small alert-values"><a href="#">Alert values</a></li>
<li role="separator" class="divider"></li>
<li class="text-center small dd-close"><a href="#">Close menu</a></li>
</ul>
</div>
</div>
