How to Extend a Bootstrap Row Beyond Its Container?

Extending Bootstrap Row Beyond Container

Problem Description

Bootstrap's grid system provides a convenient way to create responsive layouts. However, in some instances, you may encounter situations where you need an element to extend beyond the container's width. This can present challenges in achieving the desired design.

Solution

Option 1: Using CSS Pseudo Element

Create a pseudo ::before element with a negative left offset extending past the container's width. This element will act as a spacer that pushes the target element beyond the container.

#main {
    background: lightgreen;
    height: 100vh;
}

#main > .row {
    height: 100vh;
}

.left {
    background: red;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.left:before {
    left: -999em;
    background: red;
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

Option 2: Using Absolute Positioned Container

Use a container-fluid with absolute positioning that extends to the screen edges behind the primary container acting as a "ghost" container.

.abs {
    position: absolute;
    right:0;
    top:0;
    bottom:0;
    z-index: 1;
}

Additional Resources

• [Codeply Demonstration (Option 1)](http://codeply.com/go/C80RYwhWrc)
• [Codeply Demonstration (Option 2)](https://codeply.com/go/txUHH72f16)
• [Related Example: Get Two Columns with Different Background Colours that Extend to Screen Edge](https://stackoverflow.com/a/35627548)

The above is the detailed content of How to Extend a Bootstrap Row Beyond Its Container?. For more information, please follow other related articles on the PHP Chinese website!