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:
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.
I ended up combining @JoshC and @Adrian’s solutions for the best of both:
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.
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.