How to Create Full-Width Columns with Different Background Colors Using Bootstrap?

How to Create Columns with Different Background Colors that Extend to Screen Edge

To achieve this layout, we need to use a combination of containers with different background colors and absolute positioning.

Bootstrap 5

Option 1: Pseudo Element Approach

• Create a wrapper container with container-fluid to fill the entire viewport.
• Use a pseudo element on the column(s) with absolute positioning to create the illusion of a container within a container-fluid.

Option 2: Nested Grid Approach

• Use container-fluid as the main container.
• Nest smaller grid columns inside the outer columns, each with its own background color.

Bootstrap 4 and 3

• Create a wrapper container with container.
• Inside the wrapper, create another container with background-color set as desired.
• Adjust the margins and padding to achieve the desired layout.

Additional Option: Pseudo Element Technique

Alternatively, you can use a pseudo element to create a colored background that extends to the screen edge. For example:

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

This technique provides a more flexible approach to creating colored regions that extend to the screen edge, but it requires careful consideration of positioning to avoid overlapping content.

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