Is it possible to have buttons with different widths while using bootstraps btn-group-justified layout?

Question

Using bootstraps btn-group-justified layout I have a group of buttons that looks like this:

But I need it to look something like this:

Is it possible to change bootstraps justified layout to accommodate something like this?

I know I can do it without using bootstraps justified layout, but I do need the button groups to take up the whole width and be the same width as other button groups.

Answer 1

The btn-group-justified class has a fixed table-layout so the child elements with a btn-group class act like table cells. You just need to change their width.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');

body {
  margin-top: 10px;
}

.btn-group-justified > .btn-group:nth-of-type(odd) {
  width: .25%;
}

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="btn-group btn-group-justified" role="group" aria-label="">
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus-sign"></span></button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default"><span class="badge">1</span> Bottle Mango</button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus-sign"></span></button>
        </div>
        <div class="btn-group" role="group">
          <button type="button" class="btn btn-default"><span class="badge">1</span> Bottle Junk</button>
        </div>
      </div>
    </div>
  </div>
</div>