Question

I am using twitter bootstrap. Here is my code:

<div class="control-label">
    We
    <div class="btn-group">
        <a href="javascript:;" data-toggle="dropdown" class="btn dropdown-toggle">
            <span>search</span>&nbsp;&nbsp;<span class="caret"></span>
        </a>
    </div>
    Something
</div>

http://jsfiddle.net/3j7QP/

How can I make the texts and the button appear in one line aligned to the left using thw twitter bootstrap classes?

Answer 1

Classes only

Btn toolbar

If you want to stick strictly to classes, you can try .btn-toolbar but you won’t have the vertical alignment.

Demo btn-toolbar

<div class="control-label btn-toolbar">
    <!-- ... -->
</div>

Floating

Floating doesn’t seem to be an appropriate solution because you loose the line continuity. So you shouldn’t use .pull-left.

CSS

Otherwise there are several solutions :

No btn-group

First of all you could remove the div.btn-group since apparently you are not using it.

Demo no div

Inline blocks

Or you could use display: inline-block; on all elements (but you should enclose text in blocks).

Demo inline blocks

.myClass > div {
    vertical-align: middle;
    display: inline-block;
}

<div class="control-label myClass">
    <div>We</div>
    <div class="btn-group"><!-- ... --></div>
    <div>Something</div>
</div>