Can I have .col inside of another col?

Question

I have a problem with Bootstrap columns. I have a row with a column (.col-12). Inside this column I have 2 columns (.col-2), but .col-2 use all width of .col-12.

.container {
  //border: 1px solid black;
  height: 100vh;
}
.prueba {
  height:  calc(30%);
  //border: 1px solid red;
}
.fila {
  height: calc(100%);
  //border: 1px solid purple;
}
.col-2 {
  height: calc(100%);
  border: 1px solid green;
}

<div class="container">
  <div class="row prueba">
    <div class="col-12 fila">
      <div class="col-2"></div>
      <div class="col-2"></div>
    </div>
  </div>
</div>

Why does the .col-2 use all width of .col-12?

A col should always be inside a row. Add a row to col-12 and put the other columns inside that row. — Gerard, Jul 26 '19 at 08:20

score 0 · Accepted Answer · answered Jul 26 '19 at 08:23

Just wrap them in another .row.

.container {
  height: 100vh;
}

.col-2 {
  border: 1px solid green;
  min-height: 64px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-2"></div>
        <div class="col-2"></div>
      </div>
    </div>
  </div>
</div>

Can I have .col inside of another col?

1 Answers1