title: How do I make a div to a Bootstrap drop-down
body: <p>I need to make a div as a dropdown and when clicking on it, 
  the menu slides and shows its items.</p>
  
  <p>I've tried to implement this but when clicking on the div it doesn't show 
  it's items at all.</p>
  
  <p>I've used this reference:
  <a href="http://getbootstrap.com/javascript/#dropdowns-examples" rel="nofollow">http://getbootstrap.com/javascript/#dropdowns-examples</a></p>
  
  <p>Here's the way I've implemented this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('.dropdown-toggle').dropdown();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.top-bar-margin-top {
    margin-top: 43px;
    /*padding: 0;*/
  }
  .top-bar-margin-top a:hover {
    text-decoration: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;div class="col-md-2 col-lg-2 top-bar-margin-top"&gt;
    &lt;div class="dropdown"&gt;
      &lt;a id="dLabel" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;
        &lt;span class="top-bar-small-title make-it-regular"&gt;item&lt;/span&gt;
        &lt;br /&gt;
        &lt;span class="top-bar-app-links make-it-regular"&gt;Select Item&lt;/span&gt;
        &lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  
    &lt;ul class="dropdown-menu" aria-labelledby="dLabel"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can it be solved ?</p>