Home > Web Front-end > CSS Tutorial > How to Make Bootstrap Elements Extend Beyond Container Boundaries?

How to Make Bootstrap Elements Extend Beyond Container Boundaries?

DDD
Release: 2024-12-06 00:47:10
Original
401 people have browsed it

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;
}
Copy after login

Example:

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

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;
}
Copy after login

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>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template