Bootstrap getting dropdown on same line as buttons - html

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 :
Add new class "div-inline" to div with class dropdown..
Add this css
.div-inline{
display:inline-block;
}
JSFIddle : http://jsfiddle.net/rahulrulez/52VtD/7464/

Answer 2

As of bootstrap 4, you can change the dropdown line from:
<div class="dropdown">
to:
<div class="dropdown d-inline-block">
That will make all the buttons show up in one line.

Answer 3

Add this to your CSS:
.dropdown{
display: inline;
}
fiddle

Answer 4

I have just one drop down button and a few "normal" buttons. I am using bootstrap and did not want to get into editing CSS, so I resolved the issue as follows. It works, it is on one line, but the above solutions will work better if you have more than one dropdown on the same line.
I wrapped the whole thing (normal buttons and dropdown) into a <div class="row">. I then changed the <div class="dropdown> of the dropdown to <div class="dropdown col-sm-1" style="margin-right: 2%">. It did the trick.
My code looks like this:
<div class="row">
<spring:url value="/person/${person.id}/addaddress" var="addaddressUrl" />
<button class="btn btn-info"
onclick="location.href='${addaddressUrl}'">Add Address</button>
<spring:url value="/person/${person.id}/addphone" var="addphoneUrl" />
<button class="btn btn-primary"
onclick="location.href='${addphoneUrl}'">Add Phone</button>
<spring:url value="/person/${person.id}/addemail" var="addemailUrl" />
<button class="btn btn-success"
onclick="location.href='${addemailUrl}'">Add Email</button>
<spring:url value="/person/${person.id}/addpass" var="addpassUrl" />
<button class="btn btn-default"
onclick="location.href='${addpassUrl}'">Add Pass</button>
<spring:url value="/person/${person.id}/addnote" var="addnoteUrl" />
<button class="btn btn-warning"
onclick="location.href='${addnoteUrl}'">Add Note</button>
<div class="dropdown col-sm-1" style="margin-right: 2%">
<spring:url value="/person/${person.id}/role1" var="role1Url" />
<spring:url value="/person/${person.id}/role2" var="role2Url" />
<spring:url value="/person/${person.id}/role3" var="role3Url" />
<spring:url value="/person/${person.id}/role4" var="role4Url" />
<spring:url value="/person/${person.id}/role5" var="role5Url" />
<spring:url value="/person/${person.id}/role6" var="role6Url" />
<button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown"
>Add Role
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>role1</li>
<li>role2</li>
<li>role3</li>
<li>role4</li>
<li>role5</li>
<li>role6</li>
</ul>
</div>