Columns inside columns-CodePudding

I'm trying to learn Bootstrap and been reading about "nesting", but it is not working for me as I hoped for.

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.

Edit: I'm using bootstrap version: 4.6.1

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div >

  <div >
    <div >
      1
    </div>
    <div >
      2
      <div >
        <div >
          2.1
        </div>
        <div >
          2.2
        </div>
        <div >
          2.3
        </div>
      </div>
    </div>
    <div >
      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:

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div >
  <div >
    <div >1</div>
    <div >
      <div >
        <div >2.1</div>
        <div >2.2</div>
        <div >2.3</div>
      </div>
    </div>
    <div >3</div>
  </div>
</div>