How to Create Full-Screen Two-Column Layouts with Different Background Colors Using Bootstrap?

How to Create Two Columns with Different Background Colors that Span to the Screen Edge

Problem:

You wish to create two columns on a webpage, each with a distinct background color, extending to the screen's edges. However, the content of the columns should stay within the fixed width of the Bootstrap grid system.

Solution:

Using Bootstrap 5 Beta:

The concept remains similar in Bootstrap 5:

• Use a pseudo-element with an absolute position on the column(s) to create the illusion of a container within a container-fluid.

Example for Bootstrap 5 Beta:

<div class="container-fluid">
    <div class="row">
        <div class="col-6 bg-info">
            <div class="row justify-content-end">
                <div class="col-9"> ... </div>
            </div>
        </div>
        <div class="col-6 bg-danger">
            <div class="row justify-content-start">
                <div class="col-9"> ... </div>
            </div>
        </div>
    </div>
</div>

Alternatively for Bootstrap 5:

• Utilize container-fluid and insert smaller grid columns within the outer columns, each with its background color.

Using Bootstrap 4:

The concept is akin to Bootstrap 5, but without the "-xs-" infix.

Example for Bootstrap 4:

<div class="container-fluid">
    <div class="row">
        <div class="col-6 bg-info">
            <div class="row justify-content-end">
                <div class="col-9"> ... </div>
            </div>
        </div>
        <div class="col-6 bg-danger">
            <div class="row justify-content-start">
                <div class="col-9"> ... </div>
            </div>
        </div>
    </div>
</div>

Using Bootstrap 3:

Wrap a second container within another wrapper DIV:

<div class="container">

Utilizing a Pseudo-Element in Bootstrap 3:

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

The above is the detailed content of How to Create Full-Screen Two-Column Layouts with Different Background Colors Using Bootstrap?. For more information, please follow other related articles on the PHP Chinese website!