Correct positioning of image and text

1

I'm using Bootstrap 3.3.7 and I'm having a question about how to correctly position an image and text next to it.

The image needs to be "pasted" in the browser and the text next to it and in the responsive, I need that image to occupy 100% the sides. I'm leaving a picture of what I need.

IevenmadeashapebutIdonotthinkit'stherightonebecausethetextandtheimagearenotalignedatthebottom.

Hereisanexampleofhowmycodeis:

	.img-bus{
		margin-left: -30px;
	}
<div class="bg-amarelo">
  <div class="container-fluid">
    <div class="col-md-6">
      <img class="img-bus" src="assets/images/img.png">
    </div>
    <div class="container">
      <div class="col-md-6">
        <div class="content">
          <span class="before"></span>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam feugiat feugiat massa, sed rutrum ligula dignissim non. Mauris vehicula velit bibendum ligula sollicitudin consequat. Integer condimentum suscipit ante, id accumsan metus rutrum
            euismod. Maecenas imperdiet massa quis risus facilisis dapibus.</p><span class="after"></span>
        </div>
      </div>
    </div>
  </div>
</div>

link

    
asked by anonymous 24.08.2017 / 16:43

1 answer

0

You can do this as follows:

<div class="container-fluid">
    <div class="col-md-6">
         <img class="img-bus" src="assets/images/img.png">
    </div>
    <div class="col-md-6">
         <p style="padding:50px 30px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam feugiat feugiat massa, sed rutrum ligula dignissim non. Mauris vehicula velit bibendum ligula sollicitudin consequat. Integer condimentum suscipit ante, id accumsan metus rutrum euismod. Maecenas imperdiet massa quis risus facilisis dapibus.</p>
    </div>
</div>

In the p tag in the style="padding: npx npx" excerpt, having n as any number, you can change as desired to keep the text "aligned."

    
24.08.2017 / 17:00