Bootstrap: Justified shrink the button - html

Question

I have a div where I want to use a full-width button group with 3 button.
The 2nd and the 3th button "text" will be only font-awesome icons, so I want them to be smaller than the 1st. (For example 60%-20%-20%)
I tried this snippet (I didn't used the "other two are smaller" style yet, so it have to be a 33%-33%-33% buttongroup)
<div class="btn-group btn-group-justified">
<button class="btn btn-default disabled">
{{$buttonText}}
</button>
<button class="btn btn-warning">
<i class="fa fa-edit"></i>
</button>
<button class="btn btn-danger">
<i class="fa fa-trash"></i>
</button>
</div>
But the whole btn-group only occupies the 25% of the div. Why?

Answer 1

To use justified button groups with <button> elements, you must wrap each button in a button group. See bootstrap documentation here: With <button> elements
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<div class="btn-group btn-group-justified">
<div class="btn-group" role="group">
<button class="btn btn-default disabled">
asdasd
</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-warning">
<i class="fa fa-edit"></i>
</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-danger">
<i class="fa fa-trash"></i>
</button>
</div>
</div>

Answer 2

I would use grid layout for my rescue. My btn no longer is restricted by width of the content.
<div class="row">
<button class="col-xs-10 btn btn-primary">
BTN 1
</button>
<button class="col-xs-1 btn btn-warning">
<i class="fa fa-edit"> BTN 2</i>
</button>
<button class="col-xs-1 btn btn-danger">
<i class="fa fa-trash"> BTN 3</i>
</button>