Currently, I am working on a project to gain a better understanding of API calls within Angular. While the functionality is running smoothly, my struggle lies in designing the HTML layout. To enhance the aesthetics, I have incorporated Bootstrap 5 into the project. However, due to my limited experience with this library, navigating through its classes poses a challenge. The layout comprises a single card where text retrieved from an API call is displayed, accompanied by a button to fetch another joke - quite straightforward. I have managed to set a maximum height for the card successfully. Nevertheless, the issue arises when dealing with the content inside it. As the length of the printed string varies, the placement of the button shifts accordingly beneath it, which I believe does not optimize the user interface/experience.
Below is a snippet of the code:
HTML
<div class="container justify-content-center align-items-center mt-5">
<div class="row">
<div class="card justify-content-center align-items-center">
<h1 class="m-3">{{ actualJoke }}</h1>
<button class="btn btn-outline-primary btn-lg m-5 px-5" (click)="getJoke()">Next joke ⏩</button>
</div>
</div>
</div>
CSS
.card {
height: 40vh;
}
I aim to anchor the button in a fixed position regardless of the container's size above it; however, I am uncertain if achieving this is feasible.