Bootstrap 5 and vertical positioning

I am using Bootstrap 5's flexbox grid to design a responsive mobile-first Angular web application.

I would like the home screen of my app to have these 3 elements :

1. The name of the app at the top of the screen
2. A row of buttons in the middle of the screen
3. A footer at the bottom of the screen

What would be the best responsive way to position these elements at the top, middle and bottom of the screen respectively, while keeping them horizontally centered.

My code at the moment looks like this :

<div class="container-fluid">
<div class="row">
    <div class="col-12 d-flex justify-content-center">
        <h1>App name</h1>
    </div>
</div>
<div class="row">
    <div class="col-12 col-sm-6 col-lg-3 d-flex">
        <button type="button" class="btn btn-outline-primary flex-fill">First button</button>
    </div>
    <div class="col-12 col-sm-6 col-lg-3 d-flex">
        <button type="button" class="btn btn-outline-primary flex-fill">Second button</button>
    </div>
    <div class="col-12 col-sm-6 col-lg-3 d-flex">
        <button type="button" class="btn btn-outline-primary flex-fill">Third button</button>
    </div>
    <div class="col-12 col-sm-6 col-lg-3 d-flex">
        <button type="button" class="btn btn-outline-primary flex-fill">Fourth button</button>
    </div>
</div>
<div class="row">
    <div class="col-12 d-flex justify-content-center">
        <p>Footer</p>
    </div>
</div>

Thank you!