Así que estoy tratando de crear una tarjeta simple con solo una imagen de fondo y un botón, con el enlace de los botones extendido por toda la tarjeta. Sin embargo, el botón no se ve horrible en la parte inferior, pero si uso una posición absoluta, elimina el enlace estirado.

 <template> <div> <h2>College Management Home</h2> <b-card class="sCardHome m-3" header="Courses" overlay img-src="https://picsum.photos/325/200/?image=26" img-alt="Card Image" > <b-button class="stretched-link homebtn" :to="{ name: 'viewCourses'}" variant="primary">View Courses</b-button> </b-card> <b-card class="sCardHome m-3" header="Lecturers" overlay img-src="https://picsum.photos/325/200/?image=27" img-alt="Card Image" > <b-button class="homebtn stretched-link" :to="{ name: 'viewLecturers'}" variant="primary">View Lecturers</b-button> </b-card> <b-card class="sCardHome m-3" header="Enrolments" overlay img-src="https://picsum.photos/325/200/?image=30" img-alt="Card Image" > <b-button class="homebtn stretched-link" :to="{ name: 'viewEnrolments'}" variant="primary">View Enrolments</b-button> </b-card> </div> </template> <script> export default { name: 'home', components: {} } </script> <style> .sCardHome { width: 100%; max-width: 20rem; float:left; text-align: center; } .homebtn { /* position: absolute; */ bottom: 15px; } </style>

En una nota al margen, ¿hay alguna forma sencilla de que los márgenes de las tarjetas se estiren para llenar el espacio, de modo que la primera tarjeta de una fila esté alineada a la izquierda con el título de la página y la barra de navegación, y la última tarjeta de una fila esté alineada a la derecha con el botón de cierre de sesión, para que los márgenes llenen el espacio en el medio para que todo encaje (en este caso, un margen izquierdo y derecho para la imagen del medio, no se puede codificar de forma rígida, ya que debe responder)? Probé la clase mx-auto, en cada tarjeta y un contenedor div, pero ninguno funcionó en absoluto.