CODEWITHSUNDEEP
csstwitter-bootstrap-3
Abdullah Jibaly
Abdullah Jibaly

Reputation: 54790

Make an element overlap contents below it using Bootstrap

I've just started playing with Twitter Bootstrap and I'm trying to make an image in a row overlap the contents below it. How can I accomplish that? I tried giving the contents below a negative margin but that doesn't seem to work in Chrome dev tools. Here's a link to what I currently have, but just to summarize:

<div class="container" role="main">
  <div class="row">
    <div class="col-md-1">
    </div>
    <div class="col-md-3">
      <a href="#" class="thumbnail">
        <img src="http://placehold.it/252x136" alt="...">
      </a>
    </div>
    <div class="col-md-8">
    </div>
  </div>

  <div class="jumbotron">  
  </div>
</div>

As you can see the <img> pushes the entire jumbotron down. I'd like it to overlap instead until the screen size collapses (responsively) and then the image should no longer overlap in that case.

UPDATE

I ended up combining @JoshC and @Adrian's solutions for the best of both:

@media (min-width: 992px) {
  #overlap {
    height: 70px;
  }
}

Upvotes: 9

Views: 11622

Answers (2)

Josh Crozier
Josh Crozier

Reputation: 240998

You could absolutely position the .col-md-3.img element, and then float the .col-md-8.nav to the right. I added some classes to the elements and then placed the styling in a media query to ensure this doesn't conflict with any mobile/tablet styling. It seems to work well on all screen sizes.

UPDATED EXAMPLE HERE - FULL SCREEN EXAMPLE

@media (min-width: 992px) {
  .col-md-3.img {
      position: absolute;
      text-align: center;
  }
  .col-md-3.img .thumbnail {
      display:inline-block;
  }
  .col-md-8.nav {
      float: right;
  }
}

Add text-align:center to center the .thumbnail element, which is now also inline-block to fix background-related issues that result from the absolute positioning.

Upvotes: 4

Adrian Enriquez
Adrian Enriquez

Reputation: 8413

You can accomplish that by adding height to your row. In the demo below, I added an id="overlap" to the row.

DEMO

CSS

#overlap{
  height:90px;
}

Upvotes: 3

Related Questions