0

I'm trying to make a grid view of columns.
Here is my code:

.pink{
  background: pink;
}

.yellow{
  background: yellow;
}

.gray{
  background: gray;
}

.blue{
  background: blue;
}

.green{
  background: green;
}

.red{
  background: red;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container"> <div class="row">
    <div class="col-md-3 ">
      <div class="col-md-12 pink">test</div>
      <div class="col-md-12 yellow">test</div>
    </div>
    <div class="col-md-3">
      <div class="col-md-12 gray">test</div>
    </div>
    <div class="col-md-6 ">
      <div class="col-md-12 blue">test</div>
      <div class="col-md-6 green">test</div>
      <div class="col-md-6 red">test</div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3">
      <div class="col-md-12 green">test</div>
    </div>
    <div class="col-md-6">
      <div class="col-md-12 pink">test</div>
    </div>
    <div class="col-md-3">
      <div class="col-md-12 gray">test</div>
    </div>
  </div> 
</div>

enter image description here

The column in gray should be of height as column pink and yellow.
The bottom Pink column is also not of full width.
Does anyone know why is this happening?
Thanks for any help.

Jared Chu
  • 2,757
  • 4
  • 27
  • 38
Mouna
  • 316
  • 4
  • 14
  • Possible duplicate of [How can I get a Bootstrap column to span multiple rows?](https://stackoverflow.com/questions/16390370/how-can-i-get-a-bootstrap-column-to-span-multiple-rows) – APerson Apr 11 '18 at 04:22
  • No, because I think my nesting is correct but I do not know why are the columns behaving like this. I tried using height: 100% property, but still it didn't work – Mouna Apr 11 '18 at 04:27
  • https://www.bootply.com/127827 – Saravana Apr 11 '18 at 04:35
  • Actually it should be row > col > row > col, while you're using row > col > col, that why your col seem not full width with each other. Second, to make it equal height, i'm suggest you use flexbox – Eezo Apr 11 '18 at 04:37

0 Answers0