CODEWITHSUNDEEP
csstwitter-bootstrap
Tomas Jacobsen
Tomas Jacobsen

Reputation: 2416

Twitter Bootstrap 3 img-responsive edge-to-edge (bleed)

Not sure if the question title is correct, but I need help to get an image full width.

I have tried to add a css class like this:

.img-edge{
  margin-right: -15px;
  margin-left: -15px;
}

But it does not work.

See example here

Anyone know what I could do?

Upvotes: 0

Views: 211

Answers (1)

Sebsemillia
Sebsemillia

Reputation: 9486

Just take the image outside of the .col-xs-12 element, like this:

<div class="container">
  <div class="row">
    <div class="col-xs-12">
        <p>Some text here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
        <p>Some text here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
        <p>Some text here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
        <p>Some text here. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>

    </div>
        <img alt="Edge to edge!" src="http://dummyimage.com/1900x400/000000/fff" class="img-responsive img-edge">
 </div>
</div>

Working Example

Upvotes: 3

Related Questions