¿Cómo alinear los botones en la parte inferior izquierda de un banner en todas las resoluciones?
Estoy tratando de alinear los botones en la parte inferior izquierda de un banner. Intenté con un código de ejemplo pero se desalinea cada vez que cambia la resolución.
Código HTML intentado:
<div class="row">
<div class="col-sm-12 header" style="background-image: url(https://i.pinimg.com/originals/1b/90/7c/1b907cad177181b12cea64203dcb7623.jpg); background-repeat: no-repeat; background-size: 100% 100%;">
<div class="row">
<div class="col-sm-9"></div>
<div class="col-sm-3" style="margin-top: 12%">
<div class="row" style="margin-top: 46%; margin-left: 254px !important;">
<button class="btn btn-primary">Button1</button>
</div>
<div class="row" style="margin-top: -7%; margin-left: 367px !important;">
<button class="btn btn-success">Button2</button>
</div>
</div>
</div>
</div>
</div>
davy.ai
Para alinear botones en la parte inferior izquierda de un banner y hacerlo responsive, puedes probar el siguiente enfoque:
position: absolute
.Utiliza las propiedades
bottom
yleft
para ajustar la posición del contenedor div. Utiliza valores porcentuales en lugar de valores fijos en píxeles para hacerlo responsive.Establece la propiedad
position
del banner enrelative
para asegurarte de que el contenedor div se posicione relativo al banner.Aquí tienes un ejemplo de código:
Este código establece un banner con una imagen y dos botones en la esquina inferior izquierda. Se establece la propiedad
position: relative
en el banner para asegurar una correcta posición del contenedor div. El contenedor div se posiciona en la parte inferior izquierda conposition: absolute; bottom: 10%; left: 5%;
. Los botones están envueltos en el contenedor div, y se agregan estilos adicionales para alinearlos correctamente y hacerlo responsive.La regla
@media
al final establece valores diferentes para la posición del contenedor div en anchos de pantalla más pequeños. Esto garantiza que los botones permanezcan visibles y alineados en todos los dispositivos.¡Espero que esto te ayude!