Columns Nested in columns - html

Question

I'm trying to make three new columns inside the my center column. But when I nest, they do go inside the centered column, but they also stack at the bottom of it. I'm interested in the center column can work as a background kind of like a container for the other three columns.
Maybe this is not how to use Bootstrap and columns? Should I instead just created some three divs that are not columns, but regular divs inside the column?
I'm trying to design a website where it has tree major columns, in which inside the center columns there should be three evenly spaced boxes/images/blocks.
I'm using Bootstrap version: 4.6.1
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="bg-secondary col-sm-2">
1
</div>
<div class="bg-primary col-sm-8">
2
<div class="row">
<div class="bg-warning col-sm-4">
2.1
</div>
<div class="bg-warning col-sm-4">
2.2
</div>
<div class="bg-warning col-sm-4">
2.3
</div>
</div>
</div>
<div class="bg-secondary col-sm-2">
3
</div>
</div>
</div>
I'm trying to get my column (bg-primary col-sm-8) in the center to get three more columns inside it:

Answer 1

For what you want, you need to use flex utility classes
.container-fluid {
height: 100vh
}
.box {
border: 5px solid red;
padding: 30px
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="container-fluid">
<div class="row h-100">
<div class="bg-secondary col-sm-2">1</div>
<div class="bg-primary col-sm-8">
<div class="row justify-content-around align-items-center h-100">
<div class="box">2.1</div>
<div class="box">2.2</div>
<div class="box">2.3</div>
</div>
</div>
<div class="bg-secondary col-sm-2">3</div>
</div>
</div>