Bootstrap 3 adding controls to a panel-heading

Question

Desired Outcome: Have a boot strap panel that contains a title on the left of the heading and a search text field with a addon button for a search. The final icon would be an option/wrench button for setting some panel body options.

Current Code:

    <div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading clearfix">
            <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4>
                <div class="input-group pull-right">
                    <input type="text" class="form-control" placeholder="Search">
                    <div class="input-group-btn">
                        <button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
                        <button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i></button>
                    </div>
                </div>
        </div>
        <div class="panel-body">
            Panel content
        </div>
    </div>
</div>

Current Result: I desire the panel-header to be on one line. I will do some adjustments as we go to smaller form size. However the current code is causing the components to wrap onto multiple rows.

Answer 1

Just get rid of the .pull-right class in your input-group.

<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading clearfix">
            <h4 class="panel-title pull-left" style="padding-top: 7.5px;">Panel header</h4>
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search">
                    <div class="input-group-btn">
                        <button class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
                        <button class="btn btn-primary"><i class="glyphicon glyphicon-wrench"></i></button>
                    </div>
                </div>
        </div>
        <div class="panel-body">
            Panel content
        </div>
    </div>
</div>

Working Example

Update

If you want the input (I gave it the ID #Special) smaller and right-aligned, you can do something like this via CSS:

#Special { 
    width: 200px; 
    float: right;
}

html:

<input id="Special" type="text" class="form-control" placeholder="Search">

Updated Example