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>

score 24 · Accepted Answer · edited Mar 18 '18 at 16:27

24

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/

edited Mar 18 '18 at 16:27

John Joe

12,412
16
70
135

answered Aug 13 '14 at 14:45

Rahul Patil

5,656
6
37
65

score 24 · Answer 2 · answered Apr 09 '18 at 06:26

24

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.

answered Apr 09 '18 at 06:26

lsu_guy

1,525
15
12

score 5 · Answer 3 · answered Aug 13 '14 at 14:36

5

Add this to your CSS:

.dropdown{
    display: inline;
}

fiddle

answered Aug 13 '14 at 14:36

Harry

3,031
7
42
67

Is there a way to do it with included bootstrap classes? – J.Zil Aug 13 '14 at 14:40
Do not modify them, it will make your life difficult I have found from reading around. please read this http://stackoverflow.com/questions/8596794/customizing-bootstrap-css-template@JamesWillson – Harry Aug 13 '14 at 14:44
Never modify bootstrap classes.. It will mess up with other layout. Create new class instead. – Rahul Patil Aug 13 '14 at 14:47

score 2 · Answer 4 · edited Mar 17 '18 at 19:46

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><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>

Bootstrap getting dropdown on same line as buttons

4 Answers4