es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo hacer que los elementos sean visibles en Bootstrap en diferentes tamaños.

28 May, 2023 Programación

Quiero hacer algo como esto en mi sitio web, quiero ver 3 opciones diferentes al entrar al sitio. Ahora, cuando cambio los tamaños, necesito ver cosas diferentes.

En XL necesito ver todas las cosas, como en la imagen.

En MD para ocultar las imágenes y ver 2 filas.

En XS para ver en 2 columnas.

Ahora logré hacerlo en XL, <div class="col d-none d-xl-block d-xxl-none ">

Pero en las otras dos opciones, no sé qué hacer para que funcionen. En ambas hice lo siguiente:

<div class="row">
<div class="col-sm-3">

¿Qué estoy dejando pasar?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para ocultar las imágenes en MD y ver 2 filas, puedes añadir la clase d-none d-md-block al elemento imagen o a su div contenedor. Por ejemplo:

    <div class="row">
  <div class="col-md-4">
    <h3>Título</h3>
    Descripción
  </div>
  <div class="col-md-4">
    <h3>Título</h3>
    Descripción
  </div>
  <div class="col-md-4 d-none d-md-block">
    <img src="imagen.jpg" alt="Imagen">
  </div>
</div>
<div class="row d-md-none">
  <div class="col-6">
    <h3>Título</h3>
    Descripción
  </div>
  <div class="col-6">
    <h3>Título</h3>
    Descripción
  </div>
</div>

    En XS para ver en 2 columnas, puedes utilizar la clase col-6 para hacer que cada elemento ocupe 6 columnas en pantallas pequeñas. Por ejemplo:

    <div class="row">
  <div class="col-6">
    <h3>Título</h3>
    Descripción
  </div>
  <div class="col-6">
    <h3>Título</h3>
    Descripción
  </div>
  <div class="col-6">
    <img src="imagen.jpg" alt="Imagen">
  </div>
</div>

Comments are closed.