I am currently utilizing the flexbox grid from Bootstrap 5 to create a mobile-first Angular web application that is responsive.
For the home screen of my app, I want to incorporate these 3 elements :
- The title of the app displayed at the top
- A series of buttons positioned in the center of the screen
- A footer placed at the bottom of the screen
What is the optimal responsive approach to align these elements at the top, middle, and bottom of the screen respectively, while also keeping them centered horizontally?
My code currently appears 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>
Many thanks!