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

Question

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

user_1264804 · Answer

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




  
    Section
    Section
    Section

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

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

1 Answers