1

estoy usando Bootstrap 4, y quiero usar el sistema de grilla para poder poner una imagen, y que el texto si es mas alto que la imagen, lo rodee. Trate de hacer algunas cosas pero recien empiezo en front-end por lo que no se bien que es lo que esta fallando. Este es mi codigo por el momento:

<div class=" col-md-5 offset-md-1 mb-4">
            <div class="card border-0 shadow">
                <img src="https://source.unsplash.com/TMgQMXoglsM/500x350" class="card-img-top float-left" alt="...">
                <div class="card-body text-center">
                    <h5 class="card-title mb-0">Titulo carta</h5>
                    <div class="card-text text-black-50">Descripcion carta</div>
                </div>
            </div>
            <p>
                AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
                AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
                AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
                AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
                AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
                AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
            </p>
        </div> 

1 respuesta 1

2

Añade la propiedad float a la imagen (left o right) y eso hara que flote entre el resto de elementos

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class=" col-md-5 offset-md-1 mb-4">
            <div class=" col-md-5 card border-0 shadow" style="float:left;">
                <img src="https://source.unsplash.com/TMgQMXoglsM/500x350" class="card-img-top" alt="...">
                <div class="card-body text-center">
                    <h5 class="card-title mb-0">Titulo carta</h5>
                    <div class="card-text text-black-50">Descripcion carta</div>
                </div>
            </div>
            <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.</p>
        </div>

Espero que te sirva, saludos.

3
  • Hola neollob, gracias por la respuesta. El texto no deberia ir donde esta el card text, sino que esa es la descripcion del a imagen. No me di cuenta y saque el <p> del div entonces quedo mal el codigo. Ahi lo corregi, el texto que quiero que quede rodenado la imagen es el <p>
    – iMSn20
    Commented el 5 sept. 2019 a las 2:23
  • Hola iMSn20, ya he modificado la respuesta, a ver si se ajusta mas a lo que buscas.
    – neollob
    Commented el 5 sept. 2019 a las 10:10
  • Si, funciono perfecto. Muchas gracias, ahora se como hacer eso!
    – iMSn20
    Commented el 5 sept. 2019 a las 13:49

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.