I need to create two rows containing buttons in each row (10 buttons each). My goal is to center these two rows on the page while ensuring they are not too close together.
To achieve this, I used the min-vh-50 class on both rows to align them in the upper-middle and lower-middle sections of the page. However, when applied, the rows do not move as expected and just stack on top of one another at the top of the page. They only appear aligned when I use min-vh-100, but I want them to fit within the same page view.
Below is the code snippet with some example buttons included:
<div class="container-fluid">
<div class="row d-flex justify-content-center align-items-center min-vh-50">
<button class="btn btn-primary col-auto m-1">Primary</button>
<button class="btn btn-secondary col-auto m-1">Secondary</button>
<button class="btn btn-success col-auto m-1">Success</button>
<button class="btn btn-danger col-auto m-1">Danger</button>
<button class="btn btn-warning col-auto m-1">Warning</button>
<button class="btn btn-info col-auto m-1">Info</button>
<button class="btn btn-light col-auto m-1">Light</button>
<button class="btn btn-dark col-auto m-1">Dark</button>
<button class="btn btn-link col-auto m-1">Link</button>
<button class="col-auto m-1">Normal</button>
</div>
<div class="row d-flex justify-content-center align-items-center min-vh-50">
<button class="btn btn-outline-primary col-auto m-1">Primary</button>
<button class="btn btn-outline-secondary col-auto m-1">Secondary</button>
<button class="btn btn-outline-success col-auto m-1">Success</button>
<button class="btn btn-outline-danger col-auto m-1">Danger</button>
<button class="btn btn-outline-warning col-auto m-1">Warning</button>
<button class="btn btn-outline-info col-auto m-1">Info</button>
<button class="btn btn-outline-light col-auto m-1">Light</button>
<button class="btn btn-outline-dark col-auto m-1">Dark</button>
<button class="btn btn-link col-auto m-1">Link</button>
<button class="col-auto m-1">Normal</button>
</div>
</div>
I am seeking a solution to this issue and would appreciate an explanation of why this is happening.