0

Quisiera saber como se podría hacer esto tanto en css puro con html y en bootstrap con html y que sea Responsive por favor.

introducir la descripción de la imagen aquí

Espero me puedan ayudar y colocar los 2 tipos de código que necesito, gracias!

Este es el codigo que intente hacer pero me sale la imagen arriba y la info abajo.

<div class="row">
        <div class="col-6">
            <div class="card class="col-3"">
                <img class="img-fluid" src="img.jpg" alt="alternative">
              </div>
            <div class="card class="col-3"">
                <h3>Hola</h3>
              </div>
          </div>

          <div class="col-6">
            <div class="card class="col-3"">
                <img class="img-fluid" src="img.jpg" alt="alternative">
              </div>
            <div class="card class="col-3"">
                <h3>Hola</h3>
              </div>
          </div>
        </div>
2
  • 1
    ¿Y tú que has intentado?
    – user128299
    Commented el 19 ago. 2020 a las 18:19
  • Ya deje el ejemplo abajo Commented el 19 ago. 2020 a las 18:30

1 respuesta 1

4

Para anidar columnas en Bootstrap hay que poner una fila (.row) contenedora de las mismas:

<div class="row">

  <div class="col-6">
    <div class="row">
      <div class="card col-6">
        <img class="img-fluid" src="img.jpg" alt="alternative">
      </div>
      <div class="card col-6">
        <h3>Hola</h3>
      </div>
    </div>
  </div>

  <div class="col-6">
    <div class="row">
      <div class="card col-6">
        <img class="img-fluid" src="img.jpg" alt="alternative">
      </div>
      <div class="card col-6">
        <h3>Hola</h3>
      </div>
    </div>
  </div>

</div>
1

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.