Correct image and text positioning

Asked

Viewed 160 times

1

I am using the bootstrap 3.3.7 and I have a question of 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 this image to occupy 100% the sides. I’m leaving an image of what I need.

inserir a descrição da imagem aqui

I even made a shape but I believe it is not the most correct, because at the bottom the text and the image are not aligned.

This is an example of how my code is:

	.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>

https://jsfiddle.net/Stevecmv/trhtctrm/

html css twitter-bootstrap

  • To align the text with the image, the two must have some relation: be in the same div, or, if they are in different Ivs (as is the case), the Ivs have the same height. From the code you posted, I couldn’t trace a relationship between the image and the text. Both are in the div-mãe "bg-yellow", but the Divs of each are separate. Maybe if you post some more code there, it would be better to analyze. For example: as the site is responsive, the image will vary in height depending on the area of the device, so the div containing the text must have some relation to that height to align.

1 answer

0

You can do it this way:

<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>

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

Browser other questions tagged html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.