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>
Bootstrap 3:
In Bootstrap 3, use an additional wrapper DIV around a second container:
<div class="container">
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; }
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!