Can Bootstrap 5 be used to extend a row outside a container without causing a horizontal scrollbar?
After researching the questions related to this topic, it seems that pseudo-elements are commonly used. However, when attempting to use a pseudo-element, a horizontal scrollbar may appear, which is not the desired outcome. Some suggest applying an overflow hidden to the body, but this solution could lead to styling issues elsewhere. Please note that the example in the provided CodePen is simplified for demonstration purposes.
CodePen offers an example showcasing the desired effect.
.full-width {
position: absolute;
}
.full-width:before {
left: -999em;
background: purple;
content: "";
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}
.full-width::after {
right: -999em;
background: purple;
content: "";
display: block;
position: absolute;
width: 999em;
top: 0;
bottom: 0;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bg-dark vh-100">
<div class="row bg-light p-5">
<p class="text-dark">Hello World</p>
</div>
<div class="row full-width bg-info p-2">
<p>Just trying to extend to full width without horizonal scroll</p>
</div>
</div>Edit: Another approach to achieve the desired effect is by breaking the page into three containers. Refer to this codepen for an example. While this method may solve the issue at hand, there could be some styling challenges in the middle container. Any recommendations on alternative methods are welcome.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row bg-light p-5">
<div class="col">
<p class="text-dark">Hello World</p>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row bg-info p-2">
<div class="col">
<p>Just trying to extend to full width without horizonal scroll</p>
</div>
</div>
</div>
<div class="container">
<div class="row bg-light p-5">
<div class="col">
<p>More content here</p>
</div>
</div>
</div>