Inlining a dropdown button-group using bootstrap

Question

My problem fiddle is here: https://jsfiddle.net/h3mb08ph/

I'd like to move the "plus" dropdown button-group to the left of the edit button.

I first moved the div to the correct place, like so: https://jsfiddle.net/h3mb08ph/1/

Next, I tried to convert the div to a span, or even to change the div's display to inline or inline-block.

This helps achieve the desired layout, but I can no longer expand the dropdown button by clicking on +. Any idea how I can achieve the button layout below, while still allowing the dropdown menu to expand while clicked?

Answer 1

Try it like this:

I also updated your fiddle: https://jsfiddle.net/h3mb08ph/2/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel-body">
  <div class="panel panel-default Object-group">
    <div class="panel-heading">
      <span>Outer Block</span>
      <div class="pull-right">
        <div class="btn-group">
          <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="glyphicon glyphicon-plus" aria-hidden="true">
          </span>
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
            <li role="presentation">
              <a role="menuitem" data-toggle="modal" data-target="#myModal" title="Create Object instance" id="clickable_create_Object_instance" data-ajax-target="#" data-modal-title="Create Object">Create from scratch
            </a>
            </li>
            <li role="presentation" class="disabled">
              <a role="menuitem" href="#">
              Clone existing Object </a><a href="#" data-toggle="tooltip" title="You are not permitted to use this feature"><span class="glyphicon glyphicon-question-sign"></span></a>
            </li>
          </ul>
        </div>
        <button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal" title="Edit Object group" id="clickable_edit_Object_group" data-ajax-target="/get_Object_group/35" data-modal-title="Edit Object Group: Super Computing">
          <span class="glyphicon glyphicon-edit" aria-hidden="true">
            </span>
        </button>
        <button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal" title="Delete Object group" id="clickable_delete_Object_group" data-ajax-target="/delete_Object_group/35" data-modal-title="Delete Object Group: Super Computing">
          <span class="glyphicon glyphicon-trash" aria-hidden="true">
            </span>
        </button>
      </div>

    </div>
    <div class="panel-body">
      <div class="panel panel-default Object">
        <div class="panel-heading">
          <a href="/f16-Super/schedule/">Inner block 1</a>
          <span class="pull-right">
          <button type="button" class="btn btn-link" data-toggle="modal" data-target="#myModal" title="Edit Object instance" id="clickable_edit_Object_instance" data-ajax-target="/get_Object_instance/4" data-modal-title="Edit Object Instance">
            <span class="glyphicon glyphicon-edit" aria-hidden="true">
              </span>
          </button>
          </span>
        </div>
        <div class="panel-body">
          <div class="container">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
            survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
            publishing software like Aldus PageMaker including versions of Lorem Ipsum.
          </div>
        </div>
      </div>
    </div>
    <p></p>
  </div>