How can I get a simple 3 stacked column layout in bootstrap 5 to be 100vh-CodePudding

I picked up Bootstrap 5 today

I'm not able to make a 3 stacked column layout with box-1, box-2 and box-3 on-top of each other take 100vh

enter image description here

I've pasted a redacted version of the code below, it really is three boxes stacked on top of each other. I can do this in CSS Grid and Flexbox but not with Bootstrap.

Here are the methods I've already tried which have not worked:

set body and html to height: 100vh
set container to height 100vh - this makes each box 100vh ora box-1 takes 100vh, box-2 overflows up to another 100vh, likewise box-3
make a wrapper class around the content of the body and set that to height 100vh
repeated 1)-3) with utility class vh-100

Any suggestions please?

Thanks

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

<body>
  <section >
    <div >
      <div >
      </div>
    </div>
  </section>

  <section >
    <div >
      <div >
      </div>
  </section>

  <section >
    <div >
      <div >
      </div>
    </div>
  </section>
</body>

CodePudding user response：

Seems to me you can dramatically simplify this. I'm not sure why you'd need rows or columns if there's only ever one of each per container. You don't even seem to need more than one container. Let's just us a basic flex column, per the docs.

/* all styles for demo only */

.d-flex {
  background: #eee;
}

.box-1:nth-child(even) {
  background: pink;
}

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

<body>
  <div >
    <section >Section</section>
    <section >Section</section>
    <section >Section</section>
  </div>
</body>

If you do happen to need the containers and inner structure, just move the flex-fill class out to the rows (and just use one container). It'll work the same.

/* all styles for demo only */

.row {
  background: #eee;
}

.row:nth-child(even) {
  background: pink;
}

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

<body>
  <div >
    <div >
      <div >
        <section >Section</section>
      </div>
    </div>

    <div >
      <div >
        <section >Section</section>
      </div>
    </div>

    <div >
      <div >
        <section >Section</section>
      </div>
    </div>
  </div>
</body>

CodePudding user response：

Try this CSS: Make adjustments as you require.

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
main{
  display:flex;
  height:100vh;
  flex-direction:column;
  width: 90vw;
  margin:0 auto;
}

main .container{
  flex:1;
  border:1px solid #ccc;
  padding: 16px;
}

<body>
  <main>
<section >
  <div >
    <div >
      box-1
    </div>
  </div>
</section>
<section >
  <div >
    <div >
      box-2
    </div>
</section>
  
 <section >
      <div >
        <div >
          box-3
        </div>
      </div>
 </section>
  </main>
 </body>