Extend Row Outside Container to View Port Width

Question

Using Bootstrap 5, how I can extend a row to either be outside a container or appear to be outside the container and stretch to the viewport edge without a horizontal scrollbar.

Reviewing the questions related to this, I see the use of pseudo-elements. When I try to use a pseudo-element, a horizontal scrollbar appears, which is not the behavior I want. As stated in an answer below, I could use an overflow hidden on the body, but that isn't preferred since I feel that could cause styling issues elsewhere. Note that the example pen below is a very watered-down example.

CodePen showing an example of what I'm trying.

.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: I can accomplish what I'm looking for by separating the page at certain points with three containers. See this codepen for an example. This may be the approach I take, in my given situation. There are styling issues I'll need to take into account in the middle container, but could be accomplished fairly easily. If there's thoughts on a better way, please let me know.

<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>

score 0 · Answer 1 · answered Jun 09 '22 at 15:56

First of all you need overflow:hidden on the body. Secondly, content doesn't go directly in the row. Instead content should be placed inside a column (col) inside the row. Then make the col full-width...

https://codeply.com/p/krYOqrcJlR

<div class="container bg-dark vh-100">
  <div class="row bg-light">
    <div class="col">
      <p class="text-dark">Hello World</p>
    </div>
  </div>
  <div class="row  bg-info">
    <div class="col full-width">
      <p>Just trying to extend to full width without horizonal scroll</p>
    </div>
  </div>
</div>


body {
  overflow:hidden;
}

.full-width {
  position: relative;
}

.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;
}

Totally understand needing a column. The overflow hidden on the body isn't preferred since that would not allow a page to scroll down. The pen I posted is a very watered-down example. An overflow x may be an option but would prefer it if there was a way to do this without that. — JHizzal, Jun 09 '22 at 16:21

Extend Row Outside Container to View Port Width

1 Answers1