css bootstrap display button inline with text

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.

Don't you need a plugin ? twitter.github.com/bootstrap/javascript.html#dropdowns — Guilherme de Jesus Santos
– Guilherme de Jesus Santos, Commented Aug 6, 2012 at 17:03

Sherbrow · Accepted Answer · 2012-08-06 17:28:25Z

50

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.

answered Aug 6, 2012 at 17:28

Sherbrow

17.4k3 gold badges67 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ndemoreau Over a year ago

Thank you so much. I had tried inline-block many times but at h1 level instead of putting it in btn-group. <div> inside h1 is actually ok.

Sherbrow Over a year ago

@ndemoreau I'm not worried about a <div> since there is also a <ul>, but you want an inline-like behavior, so <span> seems more appropriate. Both work anyway.

Collectives™ on Stack Overflow

css bootstrap display button inline with text

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related