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:
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!