How can I have 6 columns on left and a fluid column on right spanning the size of browser window?-CodePudding

I'm wondering if there's a way in bootstrap 5 to have a fluid container contain a normal container on the left with 6 columns of content but have the right side of the container be fluid to the end of the browser window?

If i use a normal fluid container the content on the left stays pinned to the left of the browser window. however, i would like the six columns on the left to remain in the normal column pattern and the columns on the right expand. In the example below the right container would remain pinned to the right side of the browser window while the left blue column expands as the browser window expands. See example:

Here is my attempt with a fluid-container - which works okay, but i don't want the left content pinned to the start of the browser window:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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 would go 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>

CodePudding user response：

I think this will be better achieved by not using containers but sticking with columns. So inside your container will be 2 columns. The one you mentioned which is actually x6 wide and a 2nd column is going to be your fluid section.

I also think that having a column which is x6 wide is going to sort of spoil your fluid effect. x6 will be 50% of the screen width on all screens so your fluid area will also appear as the remaining 50% by default. It will always appear half and half.

Try these different widths at different SM, MD and LG breakpoints...

<div class="col-sm-10 col-md-9 col-lg-8">
   Your title and button
</div>

<div class="col"> 
   Fluid to the right.
</div>

<!-- The first column is giving you a slightly wider column as the screen gets smaller -->
<!-- There is no definied width for the second column so it should take up all remaining available space no matter the screen size -->

CodePudding user response：

I'm really not sure what you're after, so here are a few guesses. See the Bootstrap flex docs for other options.

Six normal columns on the left and a flexible column on the right with minimal markup:

.d-flex > div {
  border: 1px solid pink;
  min-height: 100px;
}

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

<div class="hero-interior-banner bg-blue">
  <div class="d-flex">
    <div class="">1</div>
    <div class="">2</div>
    <div class="">3</div>
    <div class="">4</div>
    <div class="">5</div>
    <div class="">6</div>
    <div class="flex-grow-1">Auto</div>
  </div>
</div>

The first six columns contained for more specific layout:

.col {
  border: 1px solid pink;
  min-height: 100px;
}

.col-6 .col-6 {
  border: 1px solid green;
  min-height: 100px;
}

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

<div class="container-fluid hero-interior-banner bg-blue">
  <div class="row">
    <div class="col-6">
      <div class="row">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
        <div class="col">4</div>
        <div class="col">5</div>
        <div class="col">6</div>
      </div>
    </div>

    <div class="col-6">Auto</div>
  </div>
</div>