Question

I’m using twitter bootstrap.

I’m trying to create a button with dropdown that should be displayed right after a text.

The button and everything are created but it appears on the next line instead of being on the same line as my texte.

This is more or less the code:

<h1> Some title


    <div class="btn-group" xmlns="http://www.w3.org/1999/html">
      <button class="btn btn-mini">Edit</button>
      <button class="btn btn-mini dropdown-toggle data-toggle="dropdown">
          <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
         <li> ...my menu's...</li>
      </ul>
    </div>
</h1>

The h1 tag has no special positioning assigned. I’ve tried to add a float: left to the h1 tag but it doesn’t work because there is a clear:both in the btn-group’s css.

What’s wrong? Thx!

UPDATE:

I also tried to add a .pull-right class to the div. This brings it to the right line but it is on the right of the page. Not just after the text. This is too far away.

Answer 1

I don’t really know how you got that markup, but here is a working version : (demo on jsfiddle)

<h1> Some title
    <small>
        <span class="btn-group">
            <button class="btn btn-mini">Edit</button>
            <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="#">...my menus...</a></li>
            </ul>
        </span>
    </small>
</h1>

h1 .btn-group { display: inline-block; }

I only suggest you to use the <small> tag, because it sets some different styles from <h1>. But it is not required for this to work.