CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
Chao1920
Chao1920

Reputation: 145

Columns Nested in columns

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/[email protected]/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: enter image description here

Upvotes: -1

Views: 204

Answers (1)

dippas
dippas

Reputation: 60563

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

Upvotes: 2

Related Questions