Bootstrap 3: make a button group to fill column (with caret button)

Question

My goal is to fill a column with a couple of buttons. The first button has a text and should fill the remaining space in the column. The second is an icon. To be clear, that looks like an HTML select element with 'width: 100% ".

The solution should be responsive.

HTML

<div class="row">
    <div class="col-md-6">
        <div class="btn-group">
            <button type="button" class="btn btn-lg">
                Select an Option
            </button>
            <button type="button" class="btn btn-lg">
                <span class="caret"></span>
            </button>
        </div>
    </div>
    <div class="col-md-6">
        Other assets
    </div>
</div>

PLUNKER

http://plnkr.co/edit/NezDJL?p=preview

Answer 1

Without custom CSS, bootstrap uses a block level button:

those that span the full width of a parent— by adding .btn-block.

<div class="container">
<div class="row">
    <div class="col-md-10">
        <button type="button" class="btn btn-primary btn-lg btn-block">Block level button<span class="caret pull-right"></span>
        </button>
    </div>
    <div class="col-md-2">Other assets</div>
</div>

You will have to resize the caret icon though

BOOTPLY

Answer 2

Here is what I would do:

Instead of playing with percentages, I would give full 100% to the first button. Then I would use the override the style of the "caret" button to absolute, and position it to the top right corner of the parent div (.btn-group). It will overlap the button and give the desired result

http://plnkr.co/edit/Li2j9Q?p=preview

<div class="row">
    <div class="col-md-6">
        <div class="btn-group">
            <button type="button" class="btn btn-lg" style="width:100%;">
                Select an Option
            </button>
            <button type="button" class="btn btn-lg" style="position:absolute;top:0;right:0;">
                <span class="caret"></span>
            </button>
        </div>
    </div>
    <div class="col-md-6">
        Other assets
    </div>
</div>