Portada » CSS Hoja de estilos en cascada » Dividir en dos columnas Bootstrap: Solución

Dividir en dos columnas Bootstrap: Solución

Dividir en dos columnas Bootstrap. En algunas ocasiones cuando trabajamos con el framework BootStrap necesitamos una línea divisoria entre las cajas y aquí mostraremos varios ejemplos para darle solución. Divisor vertical entre dos columnas en Bootstrap.

Dividir en dos columnas Bootstrap:

Usaremos el framework de Bootstrap y además tendremos una fila que tiene dos columnas (col-md-6) o cualquier otro tipo de espacio.

Dividir en dos columnas Bootstrap: Solución
Dividir en dos columnas Bootstrap: Solución

¿Cómo creo un divisor vertical entre ambas cajas?

En Bootstrap 4 y Bootstrap 5, existe el borde derecho o izquierdo de la clase de utilidad que puede usar. Por lo tanto, estas declaraciones deben ir dentro del atributo CLASS en nuestra etiqueta DIV.

  • Usando border-left.- Nos gerera el borde que necesitamos
  • Aplicando pl-4.- Nos permite asisgnarle espacio entre las cajas

Entonces, veamos un ejemplo de como implementar esta clase:

<div class="row">
<div class="col-6 border-right"></div>
<div class="col-6"></div>
</div>

Con Bootstrap 4 puedes usar bordes, evitando escribir otro CSS.

border-left

Con la clase anterior hemos divido en dos y hemos creado un borde notorio entre las dos cajas, pero si desea espacio entre el contenido y el borde, puede usar el relleno. (en este ejemplo, relleno a la izquierda 4px), usted es libre de elegir el tamaño de relleno de su preferencia.

pl-4

Ejemplo completo de la implementación

Si, observamos es muy sencillo implementar bordes en Bootstrap, solo debemos de declarar el fichero bootstrap.min.css y en el div de la caja asignarle las clases border-left y pl-4.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row">
<div class="offset-6 border-left pl-4">First</div>
<div class="offset-6 border-left pl-4">Second</div>
</div>

Segundo ejemplo con Bootstrap 4.7.0

Presentamos un ejemplo completo en esta versión del Framework más su archivo externo en modo CDN para evitar la carga desde nuestro servidor.

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>

<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-7"> 1 of 2 </div>
<div class="border-left d-sm-none d-md-block" style="width: 0px;"></div>
<div class="col-md-5" style="margin-left: -1px;">
<hr class="d-sm-block d-md-none">
2 of 2 </div>
</div>
</div>
</body>
</html>

Separador de cajas para Bootstrap 5

Esta vendría a ser la última versión de este framework y también les traemos un ejemplo para colocar líneas divisorias entre cajas.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<div class="row">
<div class="offset-6 border-start border-5">Primera Linea</div>
<div class="offset-6 border-start border-5">Segunda Linea</div>
</div>

Conclusión

Bootstrap en un potente Framework para implementar en sistemas web y/o páginas web, cada día su uso se va incrementando porque es fácil de implementar y nos ahorra un monto de tiempo en gestionar CSS.

Si bien este framework se caracteriza por manejar estilos responsivas y cajas dentro del HTML. Sin embargo, si deseamos colocarles bordes a nuestras cajas podemos hacerlo gracias a los ejemplos que pusimos líneas arriba.

Hemos creado ejemplos para Bootstrap 4 y Bootstrap 5 en simultaneo, así puedes elegir cualquiera de los dos para vuestros proyectos.

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja un comentario

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

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad