I am looking to create a button grid resembling a numpad for my project. I am utilizing angular and bootstrap 5 and thought of using btn-group and btn-group-vertical for this purpose.
While this setup would work for a regular button grid, I need to have two buttons, "OK" and "0," larger than the rest. I attempted to achieve this by nesting vertical and horizontal groups, but it seems that the borders are not rounding correctly with deeper nestings.
Is the nesting limited to just one level? If so, is there an alternative way to create a similar numpad without relying on Bootstrap's rows and columns with extensive CSS? Or perhaps there is another method to incorporate larger "OK" and "0" buttons in the grid?
This is what I have come up with so far:
@import url("https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a5855554e494e485b4a1753595554497a0b140b0a140f">[email protected]</a>/font/bootstrap-icons.css");
.btn {
height: 75px;
min-height: 75px;
}
.zero {
width: calc(100%*2/3)
}
.decimal {
width: 33.4%;
}<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ceaca1a1babdbabcafbe8efbe0fde0ff">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="05676a6a71767177647545302b362b34">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b4944445f585f594a5b0642484445586b1a051a1b051e">[email protected]</a>/font/bootstrap-icons.css">
<div class="container">
<div class="row">
<div class="col-6">
<div class="btn-group w-100 keys">
<div class="btn-group-vertical w-100" role="group" aria-label="Vertical button group">
<div class="btn-group" role="group">
<button type="button" class="btn btn-outline-secondary w-100">1</button>
<button type="button" class="btn btn-outline-secondary w-100">2</button>
<button type="button" class="btn btn-outline-secondary w-100">3</button>
<button type="butoon" class="btn btn-outline-secondary w-100"><i class="bi bi-backspace"></i></button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-outline-secondary w-100">4</button>
<button type="button" class="btn btn-outline-secondary w-100">5</button>
<button type="button" class="btn btn-outline-secondary w-100">6</button>
<button type="butoon" class="btn btn-outline-secondary w-100">C</button>
</div>
<div class="btn-group">
<div class="btn-group-vertical w-75">
<div class="btn-group" role="group">
<button type="button" class="btn btn-outline-secondary w-100">7</button>
<button type="button" class="btn btn-outline-secondary w-100">8</button>
<button type="button" class="btn btn-outline-secondary w-100">9</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-outline-secondary zero">0</button>
<button type="button" class="btn btn-outline-secondary decimal">,</button>
</div>
</div>
<div class="btn-group-vertical w-25">
<button type="button" class="btn btn-outline-secondary h-100">OK</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>