0

My title is not as descriptive or accurate as I believe it could be because I am not certain of how to phrase the issue more succinctly at this point. I will apologise up front for this mangling.

What i'm trying to do is show some text which would ideally be constrained by Bootstrap's container element. This text would run left-aligned within the standard Bootstrap container.

What i need occupying the remainder of the screen (to the right of this text) is an image which would appear to break out of the container element and utilise the entire rest of the viewport within the Bootstrap row.

I'm not sure if this might somehow be a job for Bootstrap's offset- or pull- or push- classes. What it seems i need is a hybrid container that would constrain content in the first four columns on the left of a larger (xl) screen and then allow content in the remaining eight columns to break out and behave like content within a container-fluid element.

I've attempted to streamline a JsFiddle of this here:

https://jsfiddle.net/tcq0aj3r/

1 Answers1

0

AFAIK, the best way to approach it is using a pseudo class. It adjusts along with the container and columns and therefore works responsively.

Demo: http://www.codeply.com/go/XVVG24waWi

.right {
    z-index: 0;
    color: #fff;
}

.right:before {
    background-image:url("https://images.unsplash.com/photo-1480365150985-65998f933ef6?dpr=1&auto=compress,format&fit=crop&w=1199&h=899&q=80&cs=tinysrgb&crop=");
    background-repeat: no-repeat;
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    width: 999em;
    /* allow for bootstrap column padding */
    top: -15px;
    left: 0;
    bottom: -15px;
}

Demo

Also see: Get Two Columns with different background colours that extend to screen edge

Community
  • 1
  • 1
Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Hmm, the image seems to remain fixed at that size even when the viewport reduces. Trying to get it to follow the right edge of the window and then snap to 100% of its actual width at lower breakpoints. –  Apr 16 '17 at 13:28