1

Quiero hacer que una imagen me quede a la derecha de un texto que estoy agregando. Esta es mas o menos la estructura que tengo ahora:

<div class="container h-100">
    <div class="row align-items-center border-bottom border-dark" style="height:50%;">
        <div class="col-12 text-center">
            <h2>Lorem Ipsum</h2>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam turpis tortor, egestas quis congue eget, semper in ante. Ut faucibus augue nulla, eget feugiat mi lacinia nec.
            Fusce non sapien non ex faucibus ultrices eget ut erat. Maecenas bibendum posuere felis vel porttitor. Donec non massa quis nunc tempus suscipit.</p>
        </div>
    </div>
    <div class="row align-items-center" style="height:50%;')">
        <div class="col-12 text-center">
            <h2>Lorem Ipsum</h2>
            <p class="lead">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam turpis tortor, egestas quis congue eget, semper in ante. Ut faucibus augue nulla, eget feugiat mi lacinia nec.
                Fusce non sapien non ex faucibus ultrices eget ut erat. Maecenas bibendum posuere felis vel porttitor. Donec non massa quis nunc tempus suscipit.
            </p>
        </div>
    </div>
</div>

Lo que quiero, es que dentro de cada row, ademas de tener un h2 y un p, tener una imagen y hacer que este a la izquierda o derecha de estos.

¿Alguna ayuda? Gracias.

1
  • ¿Tienes una idea sobre qué tamaño tiene que ser tu imagen respecto del texto que tienes al lado? (50-50, 75-25, etc.) Commented el 20 ago. 2019 a las 18:31

2 respuestas 2

1

Te sugiero utilizar los elementos media de bootstrap, los cuales tienen multiples configuraciones y orden, aquí la referencia.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container h-100">
<div class="row align-items-center" style="height:50%;')">
  <div class="media">
    <img src="https://upload.wikimedia.org/wikipedia/commons/8/87/MiG-29K_at_MAKS-2007_airshow_%28altered%29.jpg" class="mr-3" alt="..." width="300">
    <div class="media-body">
      <h2 class="mt-0 text-center">Lorem Ipsum</h2>
      <p class="lead">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam turpis tortor, egestas quis congue eget, semper in ante. Ut faucibus augue nulla, eget feugiat mi lacinia nec.
            Fusce non sapien non ex faucibus ultrices eget ut erat. Maecenas bibendum posuere felis vel porttitor. Donec non massa quis nunc tempus suscipit.
        </p>
    </div>  
</div>

2
  • Me funciono perfecto, gracias por pasarme el dato de la clase media, no la conocia todavia.
    – iMSn20
    Commented el 20 ago. 2019 a las 21:05
  • Me alegra mucho haber sido de ayuda, recuerda marcar la respuesta como la aceptada si fue la más precisa. Commented el 21 ago. 2019 a las 13:03
-1

De la siguiente manera:

<div class="container h-100">
<div class="row align-items-center border-bottom border-dark"
    style="height: 50%;">
    <div class="col-12 text-center">
        <div class="row">               
            <div class="col">
                <h2>Lorem Ipsum</h2><p class="lead">Lorem ipsum dolor sit amet, consectetur.</p></div>
            <div class="col">
                <img src="">
            </div>
        </div>


    </div>
</div>
<div class="row align-items-center" style="height: 50%;">
    <div class="col-12 text-center">
        <div class="row">               
            <div class="col">
                <h2>Lorem Ipsum</h2><p class="lead">Lorem ipsum dolor sit amet, consectetur.</p></div>
            <div class="col">
                <img src="">
            </div>
        </div>
    </div>
</div>
1
  • Muchas gracias por la ayuda, termine usando la clase media ya que me resulta mas facil hacer todo con bootstrap! Pero gracias igual!
    – iMSn20
    Commented el 20 ago. 2019 a las 21:05

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.