BLOG BOOTSTRAP

1. Centrar un Div con Bootstrap 2. Cambiar el orden de las columnas 3. Tarjetas personalizables con Bootstrap 4. Integrar Bootstrap en una página web 5. Barra de navegación responsive con Bootstrap 6. Crea un modal personalizado con Bootstrap 7. Crear un carrusel de imágenes 8. Menu navbar centrado Bootstrap 9. Diseño de un carrusel con formulario

Centrar un Div con Bootstrap

Cómo centrar un div en Bootstrap horizontal y verticalmente?

VIDEO Cómo centrar un div en Bootstrap horizontal y verticalmente?

VER DEMO 23541

CSS Bootstrap HTML

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.

Centrar un div con Bootstrap 4.2.x

  1. Centrar un div versión uno Bootstrap
  2. Centrar div versión dos con Bootstrap
  3. Centrar un botón sobre una imagen
  4. Centrar una imagen dentro de un container
  5. Centrar botones enlaces dentro de un container
  6. Centrar tres divs dentro de un container
  7. Centrar un div con solo css sin Bootstrap

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.

Puedes descargar el código fuente Bootstrap HTML de este tutorial en el link que esta más abajo

PASOS PARA CENTRAR EL DIV CON BOOTSTRAP 4.2.X

  1. 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.
  2. Veamos, la etiqueta html es un contenedor le asignamos h-100
  3. El body tambien es contenedor entonces debe tener h-100
  4. Definimos un div con la clase container y tambien le asignamos  h-100
  5. A partir de aqui podríamos usar varios reglas  como mx-auto,  text-center, etc.. pero
  6. Digamos que queremos centrar un div  que podría contener un formulario o simplemente un mensaje.
  7. definimos un div con row  y justify-content-center
  8. Luego dentro va un col-sm-X  puede darle la grilla que deseen, pero eso debemos asignarle la regla align-self-center.
  9. 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>

He aqui un versión 2 de cómo centrar un elemento usando menos código, donde hago incapie que siempre debe haber una altura del contenedor, eso lo controlamos con h-100 , estoy usando la versión 4.4.1 de bootstrap.: y el código completo queda de la siguiente manera:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>DIV CENTRADO BOOTSTRAP </title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

</head>
<body class="row m-0 bg-primary justify-content-center align-items-center vh-100">
    <div class="col-sm-4 bg-white">
        <h1 class="text-center">div centrado con bootstrap V2</h1>
    </div>
</body>
</html>

Ahora veamos algo que te puede ayudar con el diseño de una portada principal de una página web

CENTRAR UN BOTÓN CON BOOTSTRAP SOBRE UNA IMAGEN

Centrar un botón con Bootstrap encima de una foto

A veces para el diseño de una portada necesitamos centrar un botón en el centro de una imagen, es decir que este sobre la imagen de forma centrada vertical y horizontalmente. Pues con el framework Bootstrap es mucho más rápido, veamos el código fuente:

<div class="card border-0 rounded-0">
    <img class="card-img" src="img/foto.jpg">
    <div class="card-img-overlay row justify-content-center">
        <div class="align-self-center">
            <a href="/simulador" class="btn btn-outline-light rounded-pill pl-5 pr-5">Botón</a>
        </div>
    </div>
</div>

Cómo se puede ver usamos un card al cual eliminamos algunos características como borde y radio, pero en general hacemos uso de estos css para obtener una imagen con un botón centrado. Y en la portada de una página se puede implementar de la siguiente manera:



<!doctype html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="Y4mySai3X3tISL7g5aau199zY4GuSGDEDAr2M0aL">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body class="bg-warning">
    <nav class="navbar navbar-expand-md navbar-primary bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand" href="/"><strong>AREQUIPA</strong></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item"><a class="nav-link" href="/">Inicio</a></li>
                    <li class="nav-item"><a class="nav-link" href="/calendario">Fixture</a></li>
                    <li class="nav-item"><a class="nav-link" href="/equipos">Equipos</a></li>
                    <li class="nav-item"><a class="nav-link" href="/simulador">Simulador</a></li>
                    <li class="nav-item"><a class="nav-link" href="/hincha">Hinchas</a></li>
                    <li class="nav-item"><a class="nav-link" href="/noticias">Noticias</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="card border-0 rounded-0">
    <img class="card-img" src="img/foto.jpg">
    <div class="card-img-overlay row justify-content-center">
        <div class="align-self-center">
            <a href="/simulador" class="btn btn-outline-light rounded-pill pl-5 pr-5">Botón</a>
        </div>
    </div>
  </div>
<div class="container">
    <h1 class="text-center display-4 pt-5 pb-5">Centrar un botón con Bootstrap</h1>
</div>
</body>
</html>

 

CENTRAR UNA IMAGEN CON BOOTSTRAP ABSOLUTAMENTE.

Centrar una imagen con Bootstrap

En ocasiones en nuestros diseños web necesitamos centrar vertical y horizontalmente una imagen pequeña o regular dentro de un div o contenedor, pues aquí veamos como podemos centrar:

Pasos para centrar una imagen:

  1. En la etiqueta html agregamos la clase h-100
  2. Igualmente en la etiqueta body h-100
  3. Declaramos un div con centrado con la clase container a 1140px, altura con h-100 y empleamos las clases flexbox como d-flex y align-items-center
  4. Finalmente centramos la imagen con la clase mx-auto d-block obviamente el ancho de la imagen debe ser menor al contenedor
<!DOCTYPE html>
<html lang="es" class="h-100">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CENTRAR CON BOOTSTRAP</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body class="bg-danger h-100">
    <div class="container bg-info h-100 d-flex align-items-center">
        <img src="/img/foto.jpg" width="300" class="mx-auto d-block ">
    </div>
</body>
</html>

 

Centrar botones absolutamente en el centro de un container

Centrar botones dentro de un div contenedor

Para centrar links o botones en el medio de un div es necesario usar las clases flexbox de Bootstrap, veamos 

<!DOCTYPE html>
<html lang="es" class="h-100">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CENTRAR CON BOOTSTRAP BOTONES</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body class="bg-danger h-100">
    <div class="container text-center h-100 bg-info d-flex justify-content-center align-items-center">
        <div class="col-3"><a href="" class="btn btn-outline-light">LINK</a></div>
        <div class="col-3"><a href="" class="btn btn-outline-light">LINK</a></div>
        <div class="col-3"><a href="" class="btn btn-outline-light">LINK</a></div>
    </div>
</body>
</html>

 

CENTRAR TRES DIVS DENTRO DE OTRO CON BOOTSTRAP

Centrar Div con Bootstrap

Para ello usamos el sistema de grillas de Bootstrap de la siguiente manera:

<!DOCTYPE html>
<html lang="es" class="h-100">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CENTRAR CON BOOTSTRAP DIVS</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body class="bg-danger h-100">
    <div class="container text-center h-100 bg-primary d-flex justify-content-center align-items-center">
        <div class="col-3 bg-white">uno</div>
        <div class="col-3 bg-white">dos</div>
        <div class="col-3 bg-white">tres</div>
    </div>
</body>
</html>

 

Ahora, en versión css

CENTRAR UN DIV SOLO CON CSS

¿Se puede centrar un div solo con CSS?. Pues claro que si y probablemente sea mucho más sencillo y se use menos recursos con esto me refiero a codear menos código CSS, una de las ventajas en el desarrollo de una página web orientada al SEO nos puede ser de mucha ayuda usar menos código unos cuantos bytes o decenas de kb y no cargar los más 190 kb que pesa Bootstrap y que probablemente no se usen todos, esto claro se traduce en velocidad de descarga de la página web, si quieres ver cómo se puede programar el centrado con solo css haz click en el siguiente link  div centrado solo con css.

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 descargar el código fuente Centrar un Div con Bootstrap?
...por favor suscríbete gratuitamente para descargarlo

DESCARGAR

Compártelo...talvez alguién lo necesite!

Whatsapp Messenger Facebook Twitter

Visitado 23541 veces | Publicado hace 9 meses

Curso Tienda Virtual en Flutter y Laravel

¿TE GUSTARÍA APRENDER A DESARROLLAR UNA APP DELIVERY DE ABARROTES PARA UNA TIENDA?

Mira el temario del curso en el siguiente link
Tienda Delivery en Flutter y Laravel

© Todos los derechos reservados CODEA APLICACIONES | Comunidad de programación web y desarrollo de aplicaciones móviles | 2020