Skip to main content
se añadieron 503 caracteres en el cuerpo
Origen Enlace
Carlos
  • 875
  • 11
  • 27

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%;
    }
}

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.

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%;
    }
}
Origen Enlace
Carlos
  • 875
  • 11
  • 27

¿Como crear un formulario de login responsivo con bootstrap 4?

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.