Bootstrap getting dropdown on same line as buttons

Question

This is my code: http://jsfiddle.net/52VtD/7462/

I'm trying to put my dropdown and buttons on the same line. But I can't do that because the dropdown is a div and stays on the line below. How can I put them on the same line?

<div class="panel panel-default">
  <div class="panel-heading">
    <input type="checkbox">
    <button type="submit" class="btn btn-xs btn-default">Stage</button>
    <button type="submit" class="btn btn-xs btn-default">Add Label</button>
    <button type="submit" class="btn btn-xs btn-default">Send Message</button>
    <button type="submit" class="btn btn-xs btn-default">Archive</button>

    <div class="dropdown">
      <button class="btn btn-xs btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
         Assign to<span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Unsorted <span class="badge">12</span></a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action <span class="badge">42</span></a></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here <span class="badge">42</span></a></li>
      </ul>
    </div>

 </div>
Test
</div>

Answer 1

Never override or modify bootstrap base classes.. Always add new class or identity. You can do it like this :

1. Add new class "div-inline" to div with class dropdown..

2. Add this css

   .div-inline{
       display:inline-block;
   }
   

JSFIddle : http://jsfiddle.net/rahulrulez/52VtD/7464/