Lo que deseo lograr se puede apreciar en el siguiente enlace: Objetivo
Estuve todo el dia buscando informacion pero no pude lograrlo directamente con bootstrap. Sin embargo, con muchas reglas CSS, breakpoints, y algunos parches pude lograrlo, no obstante, tengo muchos problemas.
Descripcion de los problemas: 1- Uno de los tantos div que contiene el formulario tiene un height inferior al contenido del mismo, por ende, siempre un btn queda fuera. 2- No tengo forma de adaptar el ancho de los divs que contienen el formulario.
Lo que se me ocurre es ir crearlo desde cero pero usando bootstrap 4 100%.
Una de las tantas cosas que hago es lo siguiente:
/*The following styles will be applied on xs, xm and md screens*/
@media only screen and (max-width: 1199px) {
body{
background-image: url({{ $company->getLoginImageUrl() }});
background-repeat: no-repeat, repeat;
background-position: center; /* Center the image */
background-size: cover; /* Resize the background image to cover the entire container */
padding-top: 50px;
}
.login-box{
opacity: .92;
flex-direction: column;
height: 60vh;
}
.reset-password{
display:block;
font-size: 0.7rem;
}
}
Es decir, cuando detecto que la pantalla es igual o inferior a MD, entonces pongo la imagen como fondo del body, le agrego opacidad al div que contiene al formulario, pero no he encontrado la forma de decirle a este div que se adapte al contenido que tiene dentro sin tocar con el footer.
El ancho del div que contiene al formulario, lo estoy controlando de la siguiente forma y me parece precaria:
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.login-box {
width: 60%;
}
}
@media only screen and (max-width: 991px){
.login-box {
width: 70%;
}
}
@media only screen and (max-width: 768px){
.login-box {
width: 90%;
}
}