Is there a way to make a fluid container in Bootstrap 5 that contains a normal container on the left with 6 columns of content, while allowing the right side of the container to expand to the end of the browser window?
When using a normal fluid container, the content on the left remains pinned to the left of the browser window. However, I want the six columns on the left to maintain their regular column pattern as the columns on the right expand. In the example below, the right container should stay fixed to the right side of the browser window while the left blue column expands as the window size increases. See example:
https://i.sstatic.net/SOJjt.png
I have tried using a fluid container, which works okay, but I do not want the left content pinned to the start of the browser window:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e0c01011a1d1a1a1c0f1e2e5b405f405d">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">>
<div class="hero-interior-banner bg-blue">
<div class="container-fluid">
<div class="row">
<div class="col-12 col-xl-6 px-5 pt-5 pb-3 text-center text-xl-start">
<h1 class="text-uppercase white">Title</h1>
<p class="white">Some text goes here</p>
<p> <a href="3" class="button-white">Learn more</a></p>
</div>
<div class="col-6 px-0">
<div class="d-none d-xl-block hero-interior-banner-image float-end">
<img class="interior-hero-overlay h-100" src="https://via.placeholder.com/400" alt="Hero overlay" />
<img class="img-fluid h-100 w-100" src="https://via.placeholder.com/400" alt="Cancer research" />
</div>
</div>
</div>
</div>
</div>