Display twitter bootstrap btn-group inline with text

Question

Problem

I want to be able to use btn group for twitter bootstrap and have the buttons show to the left of some text. Not sure if this is already a

Answer 1

This works:

<p>Hello <span class="btn-group">...</span></p>

Answer 2

Put pull-left on the buttons div: http://jsfiddle.net/dbTqC/653/

I think this just sets float: left, so you'll need to clear things below it. There's a clearfix class for this.

It's worth having a look at some CSS resources so that you understand what's happening here.

Answer 3

I did as suggested in this SO answer, so basically I started off of .navbar .brand style and adapted a little bit.
If interested, here is my changed style:

/* See .navbar .brand style in bootstrap.css for a reference */ 
.btn-toolbar .title {
  display: block;
  float: left;
  margin-top: -4px; /* Recover part of margin set in child Header nodes */
  margin-left: 10px;
  font-size: 20px;
  font-weight: 200;
  color: #777777;
  text-shadow: 0 1px 0 #ffffff;
}

HTML usage:

<div class="btn-toolbar">
    <div class="btn-group pull-left">
        <a class="btn" href="#/search">Search...</a>
    </div>
    <div class="title">
        <h4>View offers</h4>
    </div>
    <div class="btn-group pull-right">
        <a class="btn" href="#/batchDelete">Delete ...</a>
        <a class="btn" href="#/new">New</a>
    </div>
</div>

and end result:

Answer 4

<p class="btn-toolbar">
  <span class="btn-group">
    <a href="#" class="btn">Button 1</a>
  </span>
  <span class="btn-group">
    <a class="btn" href="#">Button 2</a>
    <a class="btn" href="#">Button 3</a>
  </span>
  <span class="btn-group">Text here.</span>
</p>