Button next to text with Bootstrap

Question

I'm trying to do something really simple : have some text and a group of buttons (using the btn-group class) next to it:

Make your choice : BUTTON

Here is the code I use :

<div>
    <p>Make your choice :</p>

    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
            Button <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#" id="btn1">Select 1</a></li>
            <li><a href="#" id="btn2">Select 2</a></li>
            <li><a href="#" id="btn3">Select 3</a></li>
        </ul>
    </div>
</div>

This code produces something like:

Make your choice :
BUTTON

I'm looking for a Bootstrap solution to have the text and the button on the same line. I don't want to create my own styles, I'd like to achieve this using existing Bootstrap classes/components.

Answer 1

remove the <p></p> :

<div>
Make your choice :

<div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        Button <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#" id="btn1">Select 1</a></li>
        <li><a href="#" id="btn2">Select 2</a></li>
        <li><a href="#" id="btn3">Select 3</a></li>
    </ul>
</div>