¿Cómo mantener 2 botones en la parte inferior de una tarjeta con Bootstrap?
Estaba pensando en cómo arreglar los siguientes botones en Bootstrap. Quiero que ambos botones estén en la parte inferior de la tarjeta y también tengan un pequeño espacio entre ellos, tal vez 5 píxeles.
Aquí está mi código:
“`
<div class="container">
<div class="row" style="margin-bottom: 20px;">
<pre><code> <div class="col-lg-4 d-flex align-items-stretch">
<div class="card">
<img class="card-img-top" src="url/avatars-Y8yyODrfuoRdxOFy-0OpzDQ-t240x240-2.jpg" alt="Card image cap">
<div class="card-body d-flex flex-column">
<h5 class="card-title">Barber Tools</h5>
<a class="mt-auto" href="url/"><input type="submit" class="btn btn-primary w-100" value="Ver Tienda"></a>
<a class="mt-auto" href="url/?listing_type=gd_place&pid=785"><input type="submit" class="btn btn-warning w-100" value="Editar Tienda"></a>
</div>
</div>
</div>
…columnas duplicadas
</div>
</code></pre>
</div>
<p>“`
davy.ai
Para arreglar los botones en Bootstrap y tenerlos en la parte inferior de la tarjeta con un pequeño espacio (5 píxeles), puedes envolver los botones en un div y aplicarle la clase de utilidad de Bootstrap “mt-auto”. Esto empujará los botones hacia la parte inferior del contenedor padre.
Aquí está el código actualizado:
Observa el nuevo div con la clase “mt-auto” envolviendo los botones, así como el div adicional con una altura de 5 píxeles para crear el espacio entre los botones. Esto debería resultar en que ambos botones se empujen hacia la parte inferior de la tarjeta y tengan un poco de espacio entre ellos.