Programación en BOOTSTRAP
Ejemplos y scripts de programación para tus proyectos
- Centrar un Div con Boostrap 268
- Cambiar el orden de las columnas 139
- Cómo agregar el framework Bootstrap en tu proyecto web rápido 102
- Crea un modal personalizado con Bootstrap 96
- Barra de navegación responsive con Bootstrap 64
- Tarjetas personalizables con Bootstrap 61
- Implementa un Carousel con Bootstrap 49
Centrar un Div con Boostrap
Cómo centrar un div en Bootstrap horizontal y verticalmente?
Para centrar un div, Bootstrap 4.2.x nos provee de reglas definidas para la alineación como align-self-center, pero necesitamos de más reglas css, veamos
Cómo centrar un div en Bootstrap horizontal y verticalmente?
Para centrar un div, Bootstrap 4.2.x nos provee de reglas definidas para la alineación como align-self-center, pero necesitamos de más reglas css, veamos
¿Se puede centrar absolutamente con Bootstrap?
Si, claro que sí, solo debemos conocer algunas reglas y el comportamiento de cada una que nos ayuden a tal efecto.
En este tips vamos a centrar un elemento div o capa en el centro de la pantalla de la página web tanto horizontalmente como verticalmente, esto lo vamos a realizar con las mismas reglas que nos provee el Frameworks de maquetación responsive Bootstrap, y sin la necesidad de agregar otra hoja de estilos para agregar reglas CSS o sobreescribirlas.
PASOS PARA CENTRAR EL DIV CON BOOTSTRAP 4.2.X
- Debemos tener en claro que para centrarse debe haber un altura height o un ancho width mucho más grande que el objeto a centrarse, es decir la altura del objeto debe ser menor a la altura del contenedor.
- Veamos, la etiqueta html es un contenedor le asignamos h-100
- El body tambien es contenedor entonces debe tener h-100
- Definimos un div con la clase container y tambien le asignamos h-100
- A partir de aqui podríamos usar varios reglas como mx-auto, text-center, etc.. pero
- Digamos que queremos centrar un div que podría contener un formulario o simplemente un mensaje.
- definimos un div con row y justify-content-center
- Luego dentro va un col-sm-X puede darle la grilla que deseen, pero eso debemos asignarle la regla align-self-center.
- Dentro puede colocar el cuerpo que deseen mostrar.
Y el código HTML para centrar vertical y horizontal es el siguiente:
<!DOCTYPE html>
<html lang="es" class="h-100">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>CENTRAR UN DIV CON BOOTSTRAP 4.2.X </title>
<link href="../bootstrap.min.css" rel="stylesheet">
</head>
<body class="h-100 bg-primary">
<div class="container h-100">
<div class="row justify-content-center h-100">
<div class="col-sm-8 align-self-center text-center">
<div class="card shadow">
<div class="card-body">
<h1 class="m-5">CENTRADO VERTICAL Y HORIZONTALMENTE</h1>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CONCLUSIÓN DEL TIP BOOTSTRAP
Entonces vemos que es relativamente sencillo centrar un elemento HTML con CSS en este caso un DIV con Bootstrap, sin agregar CSS adicionales. Objetivamente esto ayuda bastante a tener menos código, por tanto en una estrategía SEO es genial para obtener mayor velocidad de carga de nuestro proyecto Web, aunque poquito pero ayuda bastante.
Listo, hasta un próximo tip de diseño web.
¿Quieres el código fuente del proyecto
Centrar un Div con Boostrap?
...por favor suscríbete gratuitamente para descargarlo
Visitado 268 veces | Publicado hace 1 mes
Publicaciones de BOOTSTRAP que te pueden interesar
Más códigos de programación en BOOTSTRAP.
Ver scripts de BOOTSTRAP
Aprende a crear una app para restaurante en Android con el curso básico de Android completamente gratis
VER EL CURSO DE ANDROID