0

Estoy tratando de crear cards horizontales pero que no se stackeen en el móvil. Lo que busco es que se mantenga el mismo diseño pero obviamente adaptado, pero con el código que encontré en la documentación se ve como quiero en escritorio pero en móvil se pone la imagen arriba y el texto abajo cuando lo que busco es que se mantenga la imagen-texto en una sola card.

Algo así es lo que busco introducir la descripción de la imagen aquí

Este es el código que tengo de bootstrap 4:

<div class="card mb-3">
  <div class="row">
    <div class="col-md-4">
      <img src="..." class="card-img" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

4
  • 1
    te recomendaria que coloques el código de tus estilos,
    – PieroDev
    el 30 oct. 2019 a las 17:52
  • Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla!
    – gbianchi
    el 30 oct. 2019 a las 17:55
  • Ya lo puse, no se si lo hice bien, soy nuevo acá el 30 oct. 2019 a las 18:08
  • 1
    Aunque ya tienes una respuesta aceptada, lo que quieres hacer se logra mejor con el componente media object de Bootstrap, míralo acá. el 31 oct. 2019 a las 12:28

1 respuesta 1

0

El tema es que a bootstrap se le indica que en la fila (div con clase row), existirán dos elementos div, uno ocupando 4 espacios de columnas y otro ocupando los 8 restantes. Pero acá hay un detalle y es que se le indica eso cuando la pantalla esté en tamaño mediano (que según bootstrap es cuando la pantalla mide 720px o más Bootstrap grid options ) pero no se le indica nada cuando la pantalla tiene menor tamaño que eso, por ende bootstrap toma el valor por defecto que es usar todas las columnas disponibles de la fila y si no caben los elementos colocarlos unos debajo de otros.

Sabiendo ésto tenemos que indicarle que desde el menor tamaño de pantalla hasta el más grande, siempre el primer div va a ocupar 4 espacios de columnas en la fila y el segundo div va a ocupar 8 espacios de columnas en la fila. Nota: si no se coloca un tamaño col-sm, col-md, col-lg, col-xl entonces se toma que es desde el mínimo)

AL final te queda como el código a continuación:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card mb-3">
  <div class="row">
    <div class="col-4">
      <img src="https://www.colchasconcord.com.mx/media/catalog/product/cache/image/1000x1320/e9c3970ab036de70892d86c6d221abfe/7/5/7501165808935.jpg" class="card-img" width="200" height="200">
    </div>
    <div class="col-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

1
  • Resuelto gracias :D el 30 oct. 2019 a las 21:15

Tu Respuesta

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

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