Bootstrap getting a dropdown on the same line as the buttons

Question

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

I am trying to put my drop-down list and buttons on the same line. But I cannot do this because the dropdown is a div and stays on the line below. How can I put them on one 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 the base boot classes. Always add a new class or personality. You can do it as follows:

• Add a new "div-inline" class to the div with the dropdown class ..

• Add this css

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

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

Answer 2

Add this to your CSS:

 .dropdown{ display: inline; } 

fiddle

Answer 3

I have only one button down and a few "regular" buttons. I use bootstrap and don't want to go into CSS editing, so I solved the problem as follows. It works, it is on the same line, but the above solutions will work better if you have more than one drop-down list in one line.

I wrapped everything (regular buttons and a drop-down menu) in <div class="row"> . Then I changed the <div class="dropdown> drop-down list to <div class="dropdown col-sm-1" style="margin-right: 2%"> . This did the trick.

My code is as follows:

 <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><a href="${role1Url}">role1</a></li> <li><a href="${role2Url}">role2</a></li> <li><a href="${role3Url}">role3</a></li> <li><a href="${role4Url}">role4</a></li> <li><a href="${role5Url}">role5</a></li> <li><a href="${role6Url}">role6</a></li> </ul> </div>