Bootstrap 4 layout

Question

Is there a way in bootstrap 4 to get a layout look like the picture link.

layout

Anyone can give me some suggestion? Thanks.

1 - this is a regular container in bootstrap

2 -div that starts with the container, but its width is to the end of the width of the browser, not to the width of the container

3 - opposite situation to 2

4 - div starting in 6 columns, but its width is to the end of browser width

5- opposite situation to 4

Look at my breakout. http://codepen.io/HerrSerker/pen/MJNvod This does not use Bootstrap, as I loathe it, but the principle stays the same — yunzen, Mar 24 '17 at 13:28
Please show what you've tried and narrow it down to a specific question. — Carol Skelly, Mar 24 '17 at 13:29
1 - this is a regular container in bootstrap 2 - div that starts with the container, but its width is to the end of the width of the browser, not to the width of the container 3 - opposite situation to 2 4 - div starting in 6 columns, but its width is to the end of browser width 5- opposite situation to 4 — Zbigniew Brauer, Mar 24 '17 at 13:47
Ok, can you add that to the question instead of the comments? Are the numbered blocks images, background images, etc...? Need more details — Carol Skelly, Mar 24 '17 at 13:56
No, they are not pictures, divs with content (Can be anything), but I do not know their height, so absolute positioning is not a solution, or I do not know how to position them to height depends on the content in the middle div (2,3) — Zbigniew Brauer, Mar 24 '17 at 14:06

score 0 · Answer 1 · edited May 23 '17 at 11:54

I have answered similar questions on Bootstrap 3: Extend bootstrap row outside the container. There is no way to do this with Bootstrap "out-of-the-box".

The best way I've found is using a CSS pseudo element as it adjusts along with Bootstrap col-* and therefore works responsively.

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

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

.right:before {
    background-image:url(..);
    content: '';
    display: block;
    position: absolute;
    z-index: -1;
    width: 999em;
    /* allow for bootstrap column padding */
    top: -15px;
    left: -15px;
    bottom: -15px;
}

Demo

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

Thanks, but in my situation this is not a solution. I can not use pseudo element, I can not use background solution either. Sections 2,3,4,5, there are divs in which there may be anything, more divs, etc. — Zbigniew Brauer, Mar 24 '17 at 14:18

Bootstrap 4 layout

1 Answers1