Home > Web Front-end > CSS Tutorial > How to Extend Background Colors in Bootstrap Columns While Maintaining Boxed Width?

How to Extend Background Colors in Bootstrap Columns While Maintaining Boxed Width?

Patricia Arquette
Release: 2024-11-27 12:07:09
Original
927 people have browsed it

How to Extend Background Colors in Bootstrap Columns While Maintaining Boxed Width?

Extending Background Colors with Bootstrap

Creating a website with columns that have different background colors can be achieved using Bootstrap. However, when implementing this feature, it's essential to ensure that the content remains within the defined bootstrap boxed width, especially on larger screens.

Bootstrap 5:

In Bootstrap 5, use a pseudo element positioned absolutely on the column with the desired background color:

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

Bootstrap 3:

In Bootstrap 3, use an additional wrapper DIV around a second container:

<div class="container">
Copy after login

Example with a Pseudo Element:

For Bootstrap 3, you can also create the desired effect using a pseudo element:

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

The above is the detailed content of How to Extend Background Colors in Bootstrap Columns While Maintaining Boxed Width?. 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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template