How to Make Bootstrap Elements Extend Beyond Container Boundaries?

Element Extension Beyond Container Boundaries in Bootstrap

In Bootstrap, the container class dictates the width of the content area. However, certain designs may require elements that extend beyond this container. Here's how to achieve this:

Using a CSS Pseudo Element

Create a CSS pseudo ::before element within the overflowing element. It will resize in height along with the overflowing div.

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

Example:

<div class="container">
    <div class="row">
        <div class="col-lg-6 left">
            ...
        </div>
    </div>
</div>

Using Absolute Positioned Container

Position a .container-fluid (full-width) behind the content container. It will act as a "ghost" that extends beyond the boundaries.

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

Example:

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <h4>Content</h4>
        </div>
        <div class="col-sm-6">
            <!-- space over image -->
        </div>
    </div>
</div>
<div class="container-fluid abs">
    <div class="row h-100">
        <div class="col-sm-6 h-100">
            <!-- empty spacer -->
        </div>
        <div class="col-sm-6 right">
            <img src="image.jpg">
        </div>
    </div>
</div>

Similar Inquiries:

• Get Two Columns with different background colours that extend to screen edge
• Example with image right
• Example with image left
• Extend an element beyond the bootstrap container

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