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.

Índice

    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
    Relacionado  Navbar bootstrap 4 con iconos y responsiva

    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.

    Relacionado  Navbar bootstrap 4 con iconos y responsiva
    Relacionado  Imagen de fondo página completa usando HTML y 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.

    Nestor Tapia

    Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

    Entradas Relacionadas

    Deja una respuesta

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

    Subir