0

hola buenas tardes a todos, estoy aprendiendo bootstrap5 y estoy creando un ejemplo sencillo donde teno una fila que tiene 12 columnas, el problema aqui es que no logro poder asignar un espacio entre columnas ya probe con cosas como offset ,gx, justify-content-between pero no logro un resultado, me gustaria que me puedieran explicar o si tengo algun error por favor mencionarme que estoy haciendo mal y como solucionarlo , gracias adjunto codigo esta es la vista:

   <!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <title>Document</title>
    <style>
        .ContenedorPrincipal{
            background-color: aquamarine;
        }

        .ColSaturday{
            background-color: aqua;
            color: black;
            border: 2px groove black;
        }
    </style>
</head>
<body>
    <div class="container ContenedorPrincipal px-4">
        <div class="row row-cols-3 gy-4 justify-content-around">
            <div class="col pull-right ColSaturday">SATURDAY</div>
            <div class="col ColSaturday">SATURDAY</div>
            <div class="col ColSaturday">SATURDAY</div>
            <div class="col ColSaturday">SATURDAY</div>
            <div class="col ColSaturday">SATURDAY</div>
            <div class="col ColSaturday">SATURDAY</div>
            <div class="col ColSaturday">SATURDAY</div>
            <div class="col ColSaturday">SATURDAY</div>
            <div class="col ColSaturday">SATURDAY</div>
            <div class="col ColSaturday">SATURDAY</div>
            <div class="col ColSaturday">SATURDAY</div>
            <div class="col ColSaturday">SATURDAY</div>
        </div>
    </div>

    <script src="../js/bootstrap.bundle.js">
    </script>
</body>
1
  • Aunque ya tienes una respuesta aceptada, para mí la mejor forma de crear espacio entre columnas es con la clase .gutters, no deberías usar utilidades de espacio en los elementos con clase .col-*, lo ideal es que sea dentro de contenedores hijos de estas columnas. Te dejo el enlace por si quieres entender cómo funciona: getbootstrap.com/docs/5.2/layout/gutters Commented el 31 oct. 2022 a las 20:00

1 respuesta 1

1

En la pagina oficial de Bootstrap hay ejemplos utiles que pueden servir como guia: https://getbootstrap.com/ y me base en ellos para hacer la solucion fijate si te sirve:

<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <title>Document</title>
    <style>
        .ContenedorPrincipal{
            background-color: aquamarine;
        }

        .ColSaturday{
            background-color: aqua;
            color: black;
            border: 2px groove black;
        }
    </style>
</head>
<body>

    <div class="container ContenedorPrincipal px-4 p-2">
        <div class="row my-2"> <!-- hay que declarar fila por fila y las columnas en dicha fila dentro-->
            <div class="col ColSaturday mx-2">SATURDAY</div> <!-- mx-2 me espacia las columnas -->
            <div class="col ColSaturday mx-2">SATURDAY</div>
            <div class="col ColSaturday mx-2">SATURDAY</div>
        </div>
        <div class="row my-2">
            <div class="col ColSaturday mx-2">SATURDAY</div>
            <div class="col ColSaturday mx-2">SATURDAY</div>
            <div class="col ColSaturday mx-2">SATURDAY</div>
        </div>
        <div class="row my-2">
            <div class="col ColSaturday mx-2">SATURDAY</div>
            <div class="col ColSaturday mx-2">SATURDAY</div>
            <div class="col ColSaturday mx-2">SATURDAY</div>
        </div>
        <div class="row my-2">
            <div class="col ColSaturday mx-2">SATURDAY</div>
            <div class="col ColSaturday mx-2">SATURDAY</div>
            <div class="col ColSaturday mx-2">SATURDAY</div>
        </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </script>
</body> 

Tambien podes tener una fila con 3 columnas y despues otra fila con 5 columnas, solo tenes que agregar la columna dentro del row deseado.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.