"Button Group Block"
Bootstrap 4.1.1 Snippet by leandroruel

<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; }

Related: See More

Questions / Comments: