Search code examples
htmlcsstwitter-bootstraptwitter-bootstrap-3grid-layout

Bootstrap - Place banner outside main container.


I have worked with a website in a few months and now come to an issue where the client wants an ad "outside" the main container and i use Bootstrap standard grid.

Because the page is centered and responsive, I can not get the ad to lie on the left side because i already use 16 columns.

Do you have any ideas on how I can succeed?

Please see the image here


Solution

  • It would be great if you can provide some code. But one way to move an element relative to where it is currently us to use CSS transform: translate();. If your banner is on the right side of the container, and you want to push it outside of the container, apply transform: translateX(100%); to the banner element, and that will move it to the right by 100% of the width of the banner relative to where it is currently. Here's a demo http://codepen.io/mcoker/pen/jyPGrM