How Can I Extend a Bootstrap Row Beyond Its Container?

Extend Bootstrap Row Outside the Container

In Bootstrap, elements are contained within rows that are defined within the .container class. However, there may be cases where you need to extend the row beyond the container.

One method to achieve this is by utilizing a CSS pseudo element. Create a ::before element for the left column (left class) that matches its height. This element will extend to the left.

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

Another approach is to use an absolute positioned .container-fluid behind the content .container. This "ghost" container will extend the width of the row.

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

These solutions allow you to extend rows beyond the container, providing flexibility in your designs.

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