How to align bootstrap 3 buttons where the last button is full width

Question

I've read the docs on this subject and tried several solutions. I am looking for a way to align 3 bootstrap buttons in a button group where the first 2 buttons only take the width needed for their content and the last button takes the full width of its parent container.

Plunker: http://plnkr.co/edit/fxpcJE018kW1d72tK9Nn?p=preview

<div class="col-md-12">
  <div class="btn-group-justified">
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-move"></span>
    </button>
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-plus"></span>
    </button>
    <div class="btn btn-default btn-block">Expand this div button to full width</div>
  </div>
</div>

Answer 1

Using a little jQuery it is simple to get what you want:

HTML:

<div id="my-row" class="col-md-12 row">
<button type="button" id="btn1" class="btn btn-default">
  <span class="glyphicon glyphicon-move"></span>
</button>
<button type="button" id="btn2" class="btn btn-default">
  <span class="glyphicon glyphicon-plus"></span>
</button>
<div class="btn btn-default stretch">Expand this div button to full width</div>

CSS:

#my-row{
    padding: 0px;
    margin: 0px;
}

jQuery:

var width = $('#my-row').width()-($('#btn1').width() + $('#btn2').width()+60);

$( "div.stretch" ).css( "width", width);

$( window ).resize(function() {

    var width = $('#my-row').width()-($('#btn1').width() + $('#btn2').width()+60);

    $( "div.stretch" ).css( "width", width);
});

JsFiddle:

JsFiddle

Answer 2

This solution can give solution

    <div class="row">
            <div class="col-md-12">
                    <div class="btn-group-justified"id="b">
                        <button type="button" class="btn btn-default"id="a">
                            <span class="glyphicon glyphicon-move"></span>
                        </button>
                        <button type="button" class="btn btn-default"id="aa" >
                            <span class="glyphicon glyphicon-plus"></span>
                        </button>
                        <div class="btn btn-default btn-block"id="aaa">Expand this div button to full width</div>
                    </div>
            </div>
        </div>
  </body>

css

#aaa{
    width:100%;
    clear:right;
}
#a{
float:left;
}
#aa{
 float:left;
}

jsfiddle