It's surprising that there are only a few questions like this one. I encountered a similar requirement and found a solution by utilizing absolute positioned elements and vw units.
The approach involves using a wrapper element with the background color of the left side to give the appearance of extending to the border of the screen. An absolute positioned div, matching the viewport width, serves as the background for the right side.
You can view the implementation in action on this codepen
The markup is structured as follows:
<div class="wrapper"> <!-- styling bg without affecting container margins -->
<div class="container">
<div class="row">
<div class="col-md-8 left"></div>
<div class="col-md-4 right">
<div class="bg"><!-- an additional element acting as background --></div>
</div>
</div>
</div>
</div>
And the corresponding CSS:
/* Wrapper with bg color for left side */
.wrapper,
.left {
background-color: blue;
}
/* Styling for right container */
.right {
background-color: pink;
position: relative; /* Allows absolute positioned children */
z-index: 0;
}
.right .bg {
background-color: pink;
/* Sizing bg element to match parent size and positioning it behind to act as a background */
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: -1;
width: 100%; // For older browsers
width: 100vw; // Sets bg width equal to screen width, extending beyond the screen
}
Note: To prevent horizontal scrolling bars due to the bg extending outside the container, ensure the wrapper div or its parent has overflow-x set to hidden.
If needed, utilize css pseudo elements like :before within the right column instead of declaring the bg element separately.
Adjust the styling for smaller screens by setting appropriate breakpoints.