CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
J.Zil
J.Zil

Reputation: 2449

Bootstrap getting dropdown on same line as buttons

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>

Upvotes: 16

Views: 45639

Answers (4)

lsu_guy
lsu_guy

Reputation: 1595

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.

Upvotes: 25

Rahul
Rahul

Reputation: 5774

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/

Upvotes: 24

Guillaume
Guillaume

Reputation: 356

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>

Upvotes: 2

Harry
Harry

Reputation: 3195

Add this to your CSS:

.dropdown{
    display: inline;
}

fiddle

Upvotes: 5

Related Questions