CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
vdenotaris
vdenotaris

Reputation: 13637

Remove parent margin for a responsive image in Bootstrap

By using Bootstrap, I designed a page as follows:

original

Now, I'd like to:

  1. remove left and right margins only for the image (that uses .img-resposive as class);
  2. keep the image as responsive, but increasing its width according to .jumbotron size.

To be clear, the desired result is shown below:

desired

How can I do that?

Regards, V.

Upvotes: 0

Views: 2552

Answers (1)

Brewal
Brewal

Reputation: 8189

Use negative margins on a wrapper for this image : 

.img-responsive-parent {
    margin: 0 -60px;
}

And html :

<div class="img-responsive-parent">
    <img class="img-responsive" />
</div>

Upvotes: 3

Related Questions