Dividir en dos columnas Bootstrap: Solución
Línea divisoria en COL-MD-6 Bootstrap 5
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.
¿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.
