Extend the image outside the container on the left side

Asked

Viewed 90 times

0

I have a container, and it has a split block in it. On the left side I need to get the image out of the container. Would be this model:

inserir a descrição da imagem aqui

With this structure:

	<div class="blog_section">
		<div class="container">
			<div class="row">
				<div class="col-xs-12 col-sm-6 col-md-6">
					<img src="images/exames/imagem/exame.jpg" class="img-responsive">
				</div>
				<div class="col-xs-12 col-sm-6 col-md-6">
					<div class="abt_txt abt_txt_resp texto_exame med_toppadder50">Texto ....></div>
				</div>			
			</div>
		</div>
	</div>

What I got was the Fluid-container, but it expands the right side as well...

html css twitter-bootstrap bootstrap-3

  • What do you mean by "get the picture out of the container" as well, get out of the container? You think it sits on top of the other text column? What exactly are you in doubt?

  • 1

    Sorry. It really wasn’t didactic. Now I marked the container. The image, I would need it to come out of the container. There must be some term for it, but that would be it.

1 answer

0

That’s how I’d like you to stay:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="blog_section">
 <div class="container-fluid">
   <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-6">
	    <img src="https://d26lpennugtm8s.cloudfront.net/assets/blog_es/ideia.jpg" class="img-responsive">
      </div>
      <div class="col-xs-12 col-sm-4 col-md-4">
	    <div class="abt_txt abt_txt_resp texto_exame med_toppadder50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui est, hendrerit sit amet dui a, porttitor gravida lorem. Aenean eget dolor sed leo convallis imperdiet.<br><br>
             Pellentesque sed erat in eros finibus varius. Sed sit amet augue non tortor aliquam fermentum eu vel tellus. Suspendisse facilisis laoreet ex at bibendum.<br><br>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui est, hendrerit sit amet dui a, porttitor gravida lorem. Aenean eget dolor sed leo convallis imperdiet.
        </div>
      </div>
      <div class="col-xs-12 col-sm-2 col-md-2">
           
      </div>			
   </div>
 </div>
</div>

Browser other questions tagged html css twitter-bootstrap bootstrap-3

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