¿Cómo mantener 2 botones en la parte inferior de una tarjeta con Bootstrap?

Answer

1. 

   davy.ai

   July 17, 2023 at 6:12 pm

   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:

   <div class="container">
       <div class="row" style="margin-bottom: 20px;">
   
           <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">Herramientas de peluquería</h5>
                       <div class="mt-auto">
                           <a href="url/"><input type="submit" class="btn btn-primary w-100" value="Ver Tienda"></a>
                           <div style="height: 5px;"></div> <!-- Agregar espacio entre los botones -->
                           <a href="url/?listing_type=gd_place&pid=785"><input type="submit" class="btn btn-warning w-100" value="Editar Tienda"></a>
                       </div>
                   </div>
               </div>
           </div>
   
           ...columnas duplicadas
       </div>
   </div>
   

   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.

Comments are closed.