# Equal column height

**URL:** <https://community.hubspot.com/t/equal-column-height/1207>\
**Category:** CMS Development\
**Created:** [March 3, 2017, 1:27pm UTC](https://community.hubspot.com/t/equal-column-height/1207 "2017-03-03T13:27:33Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Larsc](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/larsc/32/102945_2.png) [@Larsc](https://community.hubspot.com/u/Larsc)\
**Post date:** [March 3, 2017, 1:27pm UTC](https://community.hubspot.com/t/equal-column-height/1207/1 "2017-03-03T13:27:33Z")

</div>

Hi,

In my design i have 4 columns in a row, with each a different height. I want to make the columns equal in height.

I found that is is possible with bootstrap ( .row-eq-height ), but these functions seems to be stripped out in the HubSpot version?

Is there another way to achieve this?

Thanks!

Lars Claus

---

<div class="post-metadata">

**Author:** ![stefen](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/stefen/32/29274_2.png) [@stefen](https://community.hubspot.com/u/stefen)\
**Post date:** [March 3, 2017, 10:06pm UTC](https://community.hubspot.com/t/equal-column-height/1207/2 "2017-03-03T22:06:59Z")

</div>

Use flexbox on the .row-fluid div. So for example, add a class “equal-heights” to the row and then the styles would look like:

```auto
.equal-heights > .row-fluid-wrapper > .row-fluid {
 display: flex;
 flex-wrap: wrap;
}

```

that should give you equal heights and the flex-wrap allows the COS grid to wrap on mobile as usual.

---

<div class="post-metadata">

**Author:** ![FORCINGMETO](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/forcingmeto/32/92090_2.png) [@FORCINGMETO](https://community.hubspot.com/u/FORCINGMETO)\
**Post date:** [December 21, 2018, 5:10am UTC](https://community.hubspot.com/t/equal-column-height/1207/3 "2018-12-21T05:10:35Z")

</div>

Doesn’t work, are you able to show screenshots of this working?

I added your CSS and built a template that looks like

 ![equal height.PNG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/8/8/88043f52189135c9b3abd56321f45fead14496b1.png)

---

<div class="post-metadata">

**Author:** ![newbie12](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/newbie12/32/64675_2.png) [@newbie12](https://community.hubspot.com/u/newbie12)\
**Post date:** [January 8, 2019, 5:10am UTC](https://community.hubspot.com/t/equal-column-height/1207/4 "2019-01-08T05:10:12Z")

</div>

Put equal-heights for the wrapper whose children need to have the same height.

 ![Capture_1.PNG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/4/6/46107fc07fca5c8dbe705e4f1bebadd4ad2b8800.png)

The output:

 ![Capture_2.PNG.jpg](https://d2qpr2jzcazej7.cloudfront.net/original/3X/a/0/a06de716e2b0bca824cc1c4bd31d182e09f5491b.jpeg)

---

<div class="post-metadata">

**Author:** ![fkistner](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/fkistner/32/79091_2.png) [@fkistner](https://community.hubspot.com/u/fkistner)\
**Post date:** [January 16, 2019, 7:19pm UTC](https://community.hubspot.com/t/equal-column-height/1207/5 "2019-01-16T19:19:17Z")

</div>

Can I reopen/derail this thread? I have a similar issue and the solutions above worked, except that the children that I need to be equal height are module groups, and I would really like the bottom module of each of them to stay at the bottom. Using the .equal-heights class on the container group worked to make the child groups equal heights, and looks totally good except that the module at the bottom just attaches to the bottom of the module above it, leaving white space below it in the shorter groups in order to match the height of the longer ones. I tried making the position of the bottom module absolute and tying it to the bottom of the group, but that made it weirdly overlap the module above it.

---

<div class="post-metadata">

**Author:** ![JohnnyB](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/johnnyb/32/89259_2.png) [@JohnnyB](https://community.hubspot.com/u/JohnnyB)\
**Post date:** [July 11, 2019, 6:50pm UTC](https://community.hubspot.com/t/equal-column-height/1207/6 "2019-07-11T18:50:51Z")

</div>

@fkistner- A few months old, you’ve probably solved it by now, however there is another way to target. Instead of using \> which requires an exact order of classes, try doing this instead:

```auto
.equal-heights .row-fluid-wrapper .row-fluid {
 display: flex;
 flex-wrap: wrap;
}

```

It’s much less strict and worked for me whereas the other did not. I’m using a two column Flex Container, where one has a module group and the other simply has a css class with a background image.

---

<div class="post-metadata">

**Author:** ![capstonedesign](https://avatars.discourse-cdn.com/v4/letter/c/96bed5/32.png) [@capstonedesign](https://community.hubspot.com/u/capstonedesign)\
**Post date:** [July 10, 2024, 2:25pm UTC](https://community.hubspot.com/t/equal-column-height/1207/7 "2024-07-10T14:25:44Z")

</div>

How do you add a class to a row? I saw [this post](https://community.hubspot.com/t5/HubSpot-Ideas/Add-Class-option-to-Drag-and-Drop-Sections/idi-p/382555/page/3#comments), but not sure there is a solution yet.