div alignment depends on div above it (bootstrap)

Question

I have 6 divs inside one div with a row class. Each div has a "mb-1", I wanted the 3 divs below the first 3 divs to adjust depending on the height of the first div. They should only have mb-1 margin between them. (the top and bottom). It should look like this. How would I do that?

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<div class="row justify-content-center align-items-start ">

  <div class="bg-primary col-md-3 ml-3 mr-3  mb-1 text-center" >
    <p>HHAHAHAHA</p>
    <p>HHAHAHAHA</p>
    <p>HHAHAHAHA</p>
   </div>
   
  <div class="bg-danger col-md-3 ml-3 mr-3  mb-1 text-center">
      <p>HHAHAHAHA</p>
      <p>HHAHAHAHA</p>
  </div>

  <div class="bg-warning col-md-3 ml-3 mr-3  mb-1 text-center">
    <p>HHAHAHAHA</p>
  </div>

  <div class="bg-danger col-md-3 ml-3 mr-3  mb-1 text-center" >
    <p>HHAHAHAHA</p>    
  </div>

   <div class="bg-warning col-md-3 ml-3 mr-3  mb-1 text-center">
    <p>HHAHAHAHA</p>
    <p>HHAHAHAHA</p>
  </div>

  <div class="bg-primary col-md-3 ml-3 mr-3  mb-1 text-center">
    <p>HHAHAHAHA</p>
    <p>HHAHAHAHA</p>
    <p>HHAHAHAHA</p>
  </div>
  
</div>

They're already aligned in one row, I want the div below them to look like the img i inserted. Check the snippet on fullscreen. — Jaocampooo, Jun 13 '20 at 15:41
Remove `justify-content-center align-items-start ` from row class , i think that will solve your query — Karan Goyal, Jun 13 '20 at 16:05
@KaranGoyal It will give the the divs the same height. Not what I am looking for. — Jaocampooo, Jun 13 '20 at 16:10
@JamesOcampo that's why I am asking. In the image there are 3 columns + the order is different. I'm not sure, what you are exactly looking for. Please edit and specify more. EDIT: Ahh, now I get it. Fullscreen. Okay. — Paul, Jun 13 '20 at 16:26
Do not mind the order, they're different divs with different height. Check the image inserted and the snippet. You can see the difference already. I wanted it to look like the image. — Jaocampooo, Jun 13 '20 at 16:29

div alignment depends on div above it (bootstrap)

0 Answers0