Using a different bootstrap container for each column

Question

I would like to have two columns in bootstrap that both use a different container's max-width.

The problem with absolute position in this case is that the container doesn't know what the height of the content would be. So that isn't an option. The content should expend the height of the container.

<div class="container--col-1 container-large--col-2">
   <div class="row">
     <div class="col-6">
         COL1 should have the max-width of .container (1320px)
     </div>
     <div class="col-6">
         COL2 should have the max-width of .container-large (1920px)
     </div>
   </div>
</div>

How can this be done using bootstrap 5? Is this even possible?

The effect I am looking for is this, but merged as 1 row:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-6">
      <div style="background-color:blue;">
        COL1
      </div>
    </div>
  </div>
</div>

<div class="container-large">
  <div class="col-6 offset-6">
    <div style='background-color:green;'>
      COL2
    </div>
  </div>
</div>

Answer 1

I did eventually came up with a solution to this problem.

I calculate the difference between the width of the containers in order to 'fill up' the missing space using this sass function.

// Calculates the left spacing between a large and normal container.
@function large-container-fill-left($breakpoint) {

    $large-container-width: 1920;

    $container-width: map-get($container-max-widths, $breakpoint);
    $container-width-half: calc(#{$container-width} / 2);

    $margin-left: calc(100% - #{$container-width-half});

    @return calc(#{$margin-left} + #{calc($grid-gutter-width / 2)});
}

Then, I use this calculated value based on the current breakpoint for a css class. Like this:

.large-container-fill-left {
    @include media-breakpoint-up(lg) {
        margin-left: large-container-fill-left(lg);
    }

    @include media-breakpoint-up(xl) {
        margin-left: large-container-fill-left(xl);
    }

    @include media-breakpoint-up(xxl) {
        margin-left: large-container-fill-left(xxl);
    }
}

Finally adding this class to the left inner container.

<div class="container container-large" style="background-color: lightskyblue;">
    <div class="row">
        <div class="col-6 px-0">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="fill-large-container" style='background-color:darkblue; height: 300px;'>
                        COL1
                         </div>
                     </div>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div style='background-color:green; height: 300px;'>
                COL2
            </div>
        </div>
    </div>
</div>

And all done! We now have the left col acting as the container class and the right col acting as the container-large class (and popping out of the design).