title: Bootstrap drop down cutting off
body: <p>I am trying to add a dropdown setting menu to my comments section in a project that I've been working on.</p>
  <p>The dropdown menu seems to cut itself off and I am not sure why is that the case.</p>
  <p>I tried <code>overflow:visible and z-index:999</code>. but none of them seem to work.</p>
  <p>This is a basic comment block that I am trying to include a dropdown in</p>
  <p>This is the basic code that I am trying to Implement</p>
  <pre><code>&lt;div class=&quot;media&quot;&gt;
      &lt;a class=&quot;pull-left&quot; href=&quot;/user/{{shared_scribble.scribble.user.username}}/&quot;&gt;&lt;img class=&quot;media-object&quot; src=&quot;/img.png/&quot;&gt;&lt;/a&gt;
      &lt;div class=&quot;dropdown pull-right&quot;&gt;
          &lt;a class=&quot;btn dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; href=&quot;#&quot; style=&quot;font-size:10px;padding: 4px 8px;&quot;&gt;
              &lt;b data-icon=&quot;&amp;#xe001;&quot;&gt;&lt;/b&gt; &lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;
          &lt;/a&gt;
          &lt;ul class=&quot;dropdown-menu&quot;&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-pencil&quot;&gt;&lt;/i&gt; Edit&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-trash&quot;&gt;&lt;/i&gt; Delete&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;icon-ban-circle&quot;&gt;&lt;/i&gt; Ban&lt;/a&gt;&lt;/li&gt;
              &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;i class=&quot;i&quot;&gt;&lt;/i&gt; Make admin&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class=&quot;media-body&quot;&gt;
          &lt;h4 class=&quot;media-heading&quot;&gt;&lt;a class=&quot;username&quot; href=&quot;/user/hi/&quot;&gt;Test User&lt;/h4&gt;
          &lt;p&gt;
              Main body of the comment
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And this is how my dropdown menu is turning out to be</p>
  <p><img src="https://i.stack.imgur.com/GCsUG.png" alt="ScreenShot" /></p>
  <h1>media CSS</h1>
  <pre><code>.media,
  .media-body {
    overflow: hidden;
    *overflow: visible;
    zoom: 1;
  }
  .media,
  .media .media {
    margin-top: 15px;
  }
  .media:first-child {
    margin-top: 0;
  }
  .media-object {
    display: block;
  }
  .media-heading {
    margin: 0 0 5px;
  }
  .media .pull-left {
    margin-right: 10px;
  }
  .media .pull-right {
    margin-left: 10px;
  }
  .media-list {
    margin-left: 0;
    list-style: none;
  }
  </code></pre>