Bootstrap 3.2: Button group and input group on same line in form

Question

When using Bootstrap 3.2, I'd like to create a form with of 8 column width (col-sm-8, so full width at small resolution), line by line:

• an input form at 100% width of the 8 columns
• a radio button group, and behind that an input group, where the textbox of the input group takes the full width left over, such that the button group and input group together have the same size as the first line

I fail to create this, as my input group will either move to the next line and/or will not fill the whole width. How to realize this?

<div class="container">
    <form role="form">
        <div class="row">
            <div class="col-sm-8">
                <div class="form-group">
                    <label class="control-label sr-only" for="input_1">Input 1</label>
                    <input type="text" class="form-control" id="input_1" placeholder="Input 1">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-8">
                <div class="form-group">
                    <label class="control-label sr-only" for="input_2">Input 2</label>
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-default active">
                        <input type="radio" name="options" id="option1" checked>Opt1</label>
                        <label class="btn btn-default">
                        <input type="radio" name="options" id="option2">Opt2</label>
                    </div>
                    <div class="input-group" style="vertical-align: middle;">
                        <span class="input-group-btn" style="width: auto;">
                            <button type="button" class="btn btn-default">Button</button> 
                        </span>
                        <!-- /btn-group -->
                        <input type="text" class="form-control" id="input_2" placeholder="Input 2">
                    </div>
                    <!-- /input-group -->
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-8">
                <div class="form-group">
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </div>
    </form>
</div>

See also my JSFiddle on this.

Many thanks for the replies!

Answer 1

Guess I've answered my own question in the mean time, by adding

float: left;
margin-right: 10px;

to the form group, and

overflow: hidden

to the button group.

I also had to delete the

width: auto;

from the input-group-btn.

For details, see http://jsfiddle.net/00gcsk90/6/

Answer 2

I hope this help.

<div class="container">
<form role="form">
    <div class="row">
        <div class="col-xs-8">
            <div class="form-group">
                <label class="control-label sr-only" for="input_1">Input 1</label>
                <input type="text" class="form-control" id="input_1" placeholder="Input 1">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-3">
            <div class="form-group">
                <label class="control-label sr-only" for="input_2">Input 2</label>
                <div class="btn-group" data-toggle="buttons">
                    <label class="btn btn-default active">
                        <input type="radio" name="options" id="option1" checked>Opt1</label>
                    <label class="btn btn-default">
                        <input type="radio" name="options" id="option2">Opt2</label>
                </div>
            </div>

        </div>
        <div class="col-xs-5">
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default col-xs-12">Button</button>
                    </span>
                    <input type="text" class="form-control" id="input_2" placeholder="Input 2">
                </div>
            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-sm-8">
            <div class="form-group">
                <button type="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </div>
</form>

JSFiddle