Today I decided to try out Bootstrap 5 for the first time.
However, I am facing a challenge in creating a 3 stacked column layout with box-1, box-2, and box-3 on top of each other, taking up 100vh.
I have shared a redacted version of the code below, where you can see that it's supposed to be three boxes stacked vertically. While I've successfully achieved this using CSS Grid and Flexbox, I'm struggling to do the same with Bootstrap.
Here are the methods I've attempted so far without success:
- Setting body and html height to 100vh
- Setting container height to 100vh – this results in each box taking up 100vh individually, causing an overflow issue
- Creating a wrapper class around the body content and setting its height to 100vh
- Repeating steps 1 to 3 with a utility class vh-100
If anyone has any suggestions or solutions, please let me know!
Thank you
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/contact/a6d4f8ede9"><span class="__cf_email__" data-cfemail="87e5e2e2f5e2e7e1f2c3b097caecabe6">[email protected]</span></a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8t94WrHftjDbrCEXSU1oBoQyl2QvZ6jIW3" crossorigin="anonymous">
<body>
<section class="container box-1">
<div class="row">
<div class="col">
</div>
</div>
</section>
<section class="container box-2">
<div class="row">
<div class="col">
</div>
</section>
<section class="container box-3">
<div class="row">
<div class="col">
</div>
</div>
</section>
</body>