title: Aligning bootstrap dropdown with text
body: <p>I created a Bootstrap dropdown using this code:</p>
  
  <pre><code>&lt;div class="dropdown" style="margin-bottom: 20px;"&gt;Ordered by
      &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;&lt;span class="primary"&gt;Random&lt;/span&gt;&lt;/a&gt;
      &lt;ul class="dropdown-menu" role="menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Random&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Earliest&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Latest&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      post.
  &lt;/div&gt;
  </code></pre>
  
  <p>But as you can see, the dropdown isn't aligned with the link:</p>
  
  <p><img src="https://i.stack.imgur.com/idRKY.png" alt="the problem"></p>
  
  <p>How can I get it to align, and if possible, also display the white triangle on top pointing to the link?</p>
  
  <p><a href="http://jsfiddle.net/JRcJr/" rel="nofollow noreferrer">JSFiddle example</a></p>