<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>Button Groups Full Width Trick</h2>
<div class="form-group">
<div class="btn-group btn-group-lg btn-group-block">
<a href="#" class="btn btn-primary"> Back</a>
<a href="" class="btn btn-secondary">submit</a>
</div>
</div>
</div>
</div>
</div>
/*
* the trick is use display grid and then
* set the available space of each button inside the container
* in percentage
* if you have 3 buttons inside .btn-group, update the value
* inside grid-template-columns from calc(100% / 2) to "100% / 3"
* or you can use javascript and put this style inline and update
* the value every page refresh
*/
.btn-group-block {
display: grid !important;
grid-template-columns: repeat(auto-fill, calc(100% / 2));
grid-auto-rows: auto;
}
