0

I am using Bootstrap and wanted to align 3 divs in one row so I used class"row" which is a class in Bootstrap. I know that row has display:flex which made the height automatically the same.

I wanted the height not to be the same. Is there any other way to align the divs without flex?

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

  <div class="bg-primary col-md-2 ml-3 mr-3 text-center" >
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
   </div>
 
   <div class="bg-danger col-md-2 ml-3 mr-3 text-center" >
    <p>This is a paragraph.</p>

   </div>
   
   <div class="bg-warning col-md-2 ml-3 mr-3 text-center" >
    <p>This is a paragraph.</p>

   </div>

</div>
Jaocampooo
  • 482
  • 3
  • 10

1 Answers1

1

You might beed the class align-items-start see at https://getbootstrap.com/docs/4.5/utilities/flex/#align-items

<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-2 ml-3 mr-3 text-center" >
    <p>HHAHAHAHA</p>
    <p>HHAHAHAHA</p>
    <p>HHAHAHAHA</p>
   </div>
 
   <div class="bg-danger col-md-2 ml-3 mr-3 text-center" >
    <p>HHAHAHAHA</p>

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

   </div>

</div>
G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129