0

I am using botostrap CSS. I wanted to align 3 divs in one row so I used class"row" in Bootstrap CSS. 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 aligning 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>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>
Jaocampooo
  • 499
  • 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
  • 94,270
  • 13
  • 95
  • 118