I'm currently working on a div containing a button group.
Below is the code snippet:
<div id="main"><!-- Full-width container with no padding or margin -->
<div class="btn-toolbar" role="toolbar">
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button class="btn btn-primary btn-lg"><i class="fa fa-plus"></i> Add</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-primary btn-lg"><i class="fa fa-download"></i> Import</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-primary btn-lg"><i class="fa fa-trash"></i> Delete</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-primary btn-lg"><i class="fa fa-save"></i> Save</button>
</div>
</div>
</div>
</div>
The challenge I'm facing is that I need all these buttons:
1. To be of equal size
2. To occupy 100% width in the parent div side-by-side
Currently, I can only accommodate 3 buttons but require space for 4.
One solution could involve dividing 100 by 4 to allocate button sizes accordingly. However, since I'm utilizing Bootstrap 4, I am curious if there's a way to achieve this using Bootstrap's own classes. If not, what would be the best approach to resolve this issue?