title: Bootstrap btn-group alignment
body: <p>I am trying to align my <code>btn-group</code> control which essentially is a <code>Dropdown</code> next to two buttons. </p>
  
  <p>This is what I currently get:</p>
  
  <p><img src="https://i.stack.imgur.com/Jn1Pl.png" alt="enter image description here"></p>
  
  <p>I don't want the <code>Dropdown</code> to be on the next line. I want it to be on the same line.
  These buttons are withing a <code>&lt;td&gt;</code> tag which is obviously part of a <code>&lt;tr&gt;</code>, <code>&lt;table&gt;</code>.</p>
  
  <p>I have developed this in ASP.NET MVC:</p>
  
  <pre><code>&lt;td&gt;
     @Html.ActionLink(..Edit Button..)
     @Html.ActionLink(..Delete Button..)
     &lt;div class="btn-group"&gt;
        &lt;button type="button" class="btn btn-default dropdown-toggle btn-mini" data-toggle="dropdown"&gt;Move Listing &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
        &lt;ul class="dropdown-menu" role="menu"&gt;
           &lt;li&gt;@Ajax.ActionLink(...)&lt;/li&gt;
           &lt;li&gt;@Ajax.ActionLink(...)&lt;/li&gt;
           &lt;li&gt;@Ajax.ActionLink(...)&lt;/li&gt;
           &lt;li&gt;@Ajax.ActionLink(...)&lt;/li&gt;
        &lt;/ul&gt;
     &lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p><strong>Update</strong>: Bootstrap CSS</p>
  
  <pre><code>.btn-group {
    position: relative;
    *margin-left: .3em;
    font-size: 0;
    white-space: nowrap;
    vertical-align: middle;
  }
  
  .btn-group:first-child {
    *margin-left: 0;
  }
  
  .btn-group + .btn-group {
    margin-left: 5px;
  }
  
  .btn-group &gt; .btn + .dropdown-toggle {
    *padding-top: 5px;
    padding-right: 8px;
    *padding-bottom: 5px;
    padding-left: 8px;
    -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
       -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
            box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  
  .btn-group &gt; .btn-mini + .dropdown-toggle {
    *padding-top: 2px;
    padding-right: 5px;
    *padding-bottom: 2px;
    padding-left: 5px;
  }
  </code></pre>
  
  <p>There are more but these would be the focal point.</p>
  
  <p><strong>Update</strong>: HTML</p>
  
  <pre><code>&lt;td&gt;
     &lt;a class="btn btn-mini" href="..."&gt;Edit&lt;/a&gt;
     &lt;a class="btn btn-mini" href="..."&gt;Delete&lt;/a&gt;
     &lt;div class="btn-group"&gt;
        &lt;button type="button" class="btn btn-default dropdown-toggle btn-mini" data-toggle="dropdown"&gt;Move Listing &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
        &lt;ul class="dropdown-menu" role="menu"&gt;
           &lt;li&gt;&lt;a ..."&gt;Down&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a ..."&gt;Bottom&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
     &lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p><strong>Update</strong> display:inline; added via Inspect Element</p>
  
  <p><img src="https://i.stack.imgur.com/Q9fUn.png" alt="enter image description here"></p>