Saltar al contenido

Cómo centrar formulario en bootstrap 3

No olvides que en las ciencias informáticas un problema casi siempre tiene más de una soluciones, por lo tanto aquí te enseñamos lo más óptimo y eficiente.

Solución:

Hay una manera simple de hacer esto en Bootstrap. Siempre que necesito hacer un div centro en una página, divido todas las columnas por 3 (total de columnas Bootstrap = 12, dividido por 3 >>> 12/3 = 4). Dividiendo por cuatro me da tres columnas. Entonces pongo mi div en la columna central. Y toda esta matemática se realiza de esta manera:

my div here

col-md-4 hace una columna de 4 columnas Bootstrap. Digamos que es la columna principal. col-md-offset-4 agrega una columna (de ancho de 4 columnas Bootstrap) a ambos lados de la columna principal.

Una forma sencilla es agregar

.center_div
    margin: 0 auto;
    width:80% /* value of your choice which suits your alignment */

a tu clase .container.Agregar width:xx % a él y obtienes div perfectamente centrado!

p.ej :

pero siento que por defecto container está centrado en BS!

El total de columnas en una fila debe sumar 12. Entonces puede hacer col-md-4 col-md-offset-4. Entonces estás dividiendo tus columnas en 3 grupos de 4 columnas cada uno. En este momento, tiene un formulario de 4 columnas con un desplazamiento de 6, por lo que solo obtiene 2 columnas en el lado derecho de su formulario. También puede hacer col-md-8 col-md-offset-2 que le daría un formulario de 8 columnas con 2 columnas cada una de espacio a la izquierda y a la derecha o col-md-6 col-md-offset-3 (formulario de 6 columnas con espacio de 3 columnas a cada lado), etc.

Si para ti ha sido útil este artículo, nos gustaría que lo compartas con más entusiastas de la programación y nos ayudes a extender nuestro contenido.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *