defer the default equal height behaviour bootstrap 4

Question

I have multiple columns in bootstrap with col-md-6 and it making the different heights to as equal height, I dont want this equal height behaviour, I am using bootstrap 4 for this. anyone can help?

is this picture the aim? or it's the problem picture? can please explain more about what you like to do? — SdSaati, Aug 04 '21 at 01:42
its the problem picture, I don't want equal heights in bootstrap 4 columns — Ali Khan, Aug 04 '21 at 04:40
in your picture, the left and right columns seems not be equal — SdSaati, Aug 04 '21 at 05:02

score -1 · Answer 1 · answered Aug 04 '21 at 05:27

One way is setting a max-height to your columns. for example you have c1 and c2:

.c1{
max-height:100%;
background-color:lightblue;
}

.c2{
max-height:100px;
overflow:hidden;
background-color:blue;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<div class="container">
<div class="row">
<div class="col-sm-6 c1">
Viverra accumsan in nisl nisi. Bibendum est ultricies integer quis auctor elit sed vulputate. Mi sit amet mauris commodo quis imperdiet massa tincidunt. Consectetur purus ut faucibus pulvinar. Vulputate enim nulla aliquet porttitor lacus luctus. Porta nibh venenatis cras sed felis eget velit. Id cursus metus aliquam eleifend. Quis risus sed vulputate odio ut enim blandit volutpat maecenas. Vivamus at augue eget arcu dictum varius duis at. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend.
</div>

<div class="col-sm-6 c2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eget est lorem ipsum dolor sit amet consectetur adipiscing. 
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

to have the unequal columns in bootstrap 4, first of all it needs to know how it is making it equal heights of the columns,so the reason is the align-items: stretch to remove this property it need to add `align-items: flex-start` so for this I have added the class="align-items-start" and the issue is fixed, — Ali Khan, Aug 04 '21 at 09:18

defer the default equal height behaviour bootstrap 4

1 Answers1