0

Tengo el siguiente código elaborado con Bootstrap 5 y funciona bien sin el gap-3, al agregarlo no logro lo que requiero:

<div class="container my-5">
    <div class="d-flex flex-wrap gap-3">
        <div class="card col-xl-3 col-md-6 col-lg-4 col-12">
          <div class="card-body">
            This is some text within a card body.
          </div>
        </div>
        <div class="card col-xl-3 col-md-6 col-lg-4 col-12">
          <div class="card-body">
            This is some text within a card body 2.
          </div>
        </div>
        <div class="card col-xl-3 col-md-6 col-lg-4 col-12">
          <div class="card-body">
            This is some text within a card body 3.
          </div>
        </div>
        <div class="card col-xl-3 col-md-6 col-lg-4 col-12">
          <div class="card-body">
            This is some text within a card body 4.
          </div>
        </div>
        <div class="card col-xl-3 col-md-6 col-lg-4 col-12">
          <div class="card-body">
            This is some text within a card body 5.
          </div>
        </div>
        <div class="card col-xl-3 col-md-6 col-lg-4 col-12">
          <div class="card-body">
            This is some text within a card body 6.
          </div>
        </div>
    </div> 
</div>

Si le quito el gap-3 se muestra como deseo según el tamaño de la pantalla, pero requiero darle espacios entre una card y otra.

1 respuesta 1

0

Intenta realizando este cambio,en Bootstrap 5 no se incluye nativamente una clase llamada gap-3.

En su lugar prueba este codigo.

<div class="container my-5">
    <div class="row gx-3 gy-3">
        <div class="col-xl-3 col-md-6 col-lg-4 col-12">
            <div class="card">
                <div class="card-body">
                    This is some text within a card body.
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 col-lg-4 col-12">
            <div class="card">
                <div class="card-body">
                    This is some text within a card body 2.
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 col-lg-4 col-12">
            <div class="card">
                <div class="card-body">
                    This is some text within a card body 3.
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 col-lg-4 col-12">
            <div class="card">
                <div class="card-body">
                    This is some text within a card body 4.
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 col-lg-4 col-12">
            <div class="card">
                <div class="card-body">
                    This is some text within a card body 5.
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 col-lg-4 col-12">
            <div class="card">
                <div class="card-body">
                    This is some text within a card body 6.
                </div>
            </div>
        </div>
    </div>
</div>

Saludos

1
  • Muchas gracias! Funciona perfectamente!
    – Joe
    Commented el 29 abr. a las 19:53

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.