Creating a uniform button group using Bootstrap

Question

I am trying to build a uniform button group. The group has 2 rows with 8 buttons each and the alphabets inside the buttons change from time to time.

Code snippet: One row of the button group

<div class="btn-toolbar" >
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="0" >Q</button>
    </div>
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="1" >Q</button>
    </div>
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="2" >Q</button>
    </div>
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="3" >Q</button>
    </div>
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="4" >Q</button>
    </div>
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="5" >Q</button>
    </div>
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="6" >Q</button>
    </div>
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="7" >Q</button>
    </div>
</div>      

This is how it looks

How should I go about aligning them?

Thanks in advance!

Answer 1

Try this.

.btn-group button{width:50px;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="btn-toolbar" >
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="0" >A</button>
    </div>
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="1" >B</button>
    </div>
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="2" >C</button>
    </div>
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="3" >D</button>
    </div>
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="4" >E</button>
    </div>
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="5" >F</button>
    </div>
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="6" >G</button>
    </div>
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="7" >H</button>
    </div>
</div>   
<div class="btn-toolbar mt-3">
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="0" >I</button>
    </div>
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="1" >J</button>
    </div>
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="2" >K</button>
    </div>
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="3" >L</button>
    </div>
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="4" >M</button>
    </div>
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="5" >N</button>
    </div>
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="6" >O</button>
    </div>
    <div role="group" class="btn-group mr-2" >
        <button type="button" class="btn btn-primary" id="7" >P</button>
    </div>
</div>

Using a specified width makes uniform.