Making the height of the right column the same as the left colum

Question

Using bootstrap, how can we make the height of two columns exactly the same?

For example:

<div class="row">
   <div class="col-md-6">
       Too much in here
   </div>
   <div class="col-md-6">
       A little here resulting in shorter height 
   </div>
</div>

All I found through google or other posts asking the same thing here either did not work or if it did, it killed the responsiveness of bootstrap.

For example the flex technique works but it kills the responsive effect of bootstrap.

What is the proper and standard solution for this?

Possible duplicate of https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height — Freeman Lambda, May 30 '17 at 19:37
"kills the responsive effect of bootstrap" - how so? Bootstrap is responsive by default, even with flexbox enabled. Which version of Bootstrap are you using? — Tieson T., May 30 '17 at 19:37
@FreemanLambda: if you read the question fully you would not flag it! — Arnold Zahrneinder, May 30 '17 at 19:37
@TiesonT.: no the flex makes the right column stick to the left one. So it does not move and shrink and go under the first column in a smaller screen. — Arnold Zahrneinder, May 30 '17 at 19:38
Possible duplicate of [How can I make Bootstrap columns all the same height?](https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) — MTCoster, May 30 '17 at 19:39
@Arrrr That hasn't been my experience. Perhaps it would be useful for you to amend your question to demonstrate that behavior? — Tieson T., May 30 '17 at 19:40
@TiesonT.: It is exactly the case with the exact same code. After using the flex display, I was very happy I thought I made it but the result was disappointing as I described. — Arnold Zahrneinder, May 30 '17 at 19:41
@Arrrr Perhaps check out this [link](https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height) it shows you ways you can do this without using flex — Matthew, May 30 '17 at 19:41
@Matthew: It's taking about a JS solution, I'm a backend developer, I'm just looking for an easy CSS solution. Don't wanna complicate the UI. — Arnold Zahrneinder, May 30 '17 at 19:43
@Arrrr there are many different solutions listed in that question. Why doesn't any of them work for you? Have you been able to nail down the reasons? Maybe one of the approaches there is very close to the solution you need. If you create a runable example of the problem we might be able to find it. — Freeman Lambda, May 30 '17 at 19:43
@FreemanLambda: Well, CSS is so, you may not believe me but I tried all of them. Only flux worked but with the downside that I described. — Arnold Zahrneinder, May 30 '17 at 19:44
Well, since the parent does not have any height specified, I don't think it is even possible. — Arnold Zahrneinder, May 30 '17 at 19:45
@Arrrr see this [codepen](https://codepen.io/codemonkeyco/pen/KmjYaR) could you please fix this to show your problem? I am not seeing an issue with what I have been given to work with. — Matthew, May 30 '17 at 19:49
@Matthew: That's awesome and it is what I want, but for me it doesn't work. — Arnold Zahrneinder, May 30 '17 at 19:50
@Arrrr you are not guiding us to your problem. We have no idea of your situation. You really need to show us a recreation of your problem for us to help you. — Freeman Lambda, May 30 '17 at 19:51
I am using the default bootstrap/jquery CDN's here and nothing else. Could you include a full version of the html and css in a snippet to show your problem? We cannot help otherwise. — Matthew, May 30 '17 at 19:51
@Matthew: You used `Container` but here I have `Container-Fluid`, I think that's the issue — Arnold Zahrneinder, May 30 '17 at 19:54
@Arrrr That does not matter as you can see [here](https://codepen.io/codemonkeyco/pen/KmjYaR). There is some other CSS or JavaScript that is overwriting the default bootstrap styles. Unless you show us your actual code/working example. We have no idea what needs to be fixed. — Matthew, May 30 '17 at 19:56
@Matthew: You are right, I understand what you are taking about — Arnold Zahrneinder, May 30 '17 at 19:58
@Matthew: Thank you very very much indeed, using your codepen example, I could trace and solve the problem. The problem was the a dive inside of the column could not inherit the height. :) — Arnold Zahrneinder, May 30 '17 at 20:03

Making the height of the right column the same as the left colum

0 Answers0