Create 5 columns of equal height

Question

I got a couple of columns created with bootstrap for a footer. Each column has some info in them (i.e: address, links etc). But a column with more information in it than the other, will be longer, so all the columns are not evenly lined out. How can I fix this?

My footer:

<div class="row row-centered">
                        <div class="col-md-2 col-centered col-centered">
                            <!-- Address -->
                                <div class="" style="padding-right:0">
                                    <div class="contact-item">
                                        <div class="ci-icon">
                                            <i class="fa fa-building-o"></i>
                                        </div>
                                        <div class="ci-title font-alt">
                                            Markten
                                        </div>
                                        <div class="ci-text">
                                            Website B.V.<br>
                                            Overkampsweg 16a<br>
                                            8102 PH Raalte
                                        </div>
                                    </div>
                                </div>
                                <!-- End Address -->
                        </div>
                        <div class="col-md-2 col-centered">
                            <!-- Address -->
                                <div class="" style="padding-right:0">
                                    <div class="contact-item">
                                        <div class="ci-icon">
                                            <i class="fa fa-cube"></i>
                                        </div>
                                        <div class="ci-title font-alt">
                                            Producten
                                        </div>
                                        <div class="ci-text">
                                            <a href="http://www.website.nl/filtering.html">Filtering</a><br>
                                            <a href="http://www.website.nl/toebehoren.html">Toebehoren</a><br>
                                            <a href="http://wwww.website.nl/zacht.html">Zacht</a>
                                            <a href="http://www.website.nl/hard.html">Hard</a>
                                            <a href="http://www.website.nl/technische-gegevens.html">Technische gegevens</a>
                                        </div>
                                    </div>
                                </div>
                                <!-- End Address -->
                        </div>
                        <div class="col-md-2 col-centered">
                            <!-- Address -->
                                <div class="" style="padding-right:0">
                                    <div class="contact-item">
                                        <div class="ci-icon">
                                            <i class="fa fa-check"></i>
                                        </div>
                                        <div class="ci-title font-alt">
                                            Diensten
                                        </div>
                                        <div class="ci-text">
                                            Website B.V.<br>
                                            Overkampsweg 16a<br>
                                            8102 PH Raalte
                                        </div>
                                    </div>
                                </div>
                                <!-- End Address -->
                        </div>
                        <div class="col-md-2 col-centered">
                            <!-- Address -->
                                <div class="" style="padding-right:0">
                                    <div class="contact-item">
                                        <div class="ci-icon">
                                            <i class="fa fa-external-link"></i>
                                        </div>
                                        <div class="ci-title font-alt">
                                            Links
                                        </div>
                                        <div class="ci-text">
                                            Link 1<br>
                                            Link 2<br>
                                            Link 3
                                        </div>
                                    </div>
                                </div>
                                <!-- End Address -->
                        </div>
                        <div class="col-md-2 col-centered">
                            <!-- Address -->
                                <div class="" style="padding-right:0">
                                    <div class="contact-item">
                                        <div class="ci-icon">
                                            <i class="fa fa-map-marker"></i>
                                        </div>
                                        <div class="ci-title font-alt">
                                            Adresgegevens
                                        </div>
                                        <div class="ci-text">
                                            Website B.V.<br>
                                            Overkampsweg 16a<br>
                                            8102 PH Raalte
                                        </div>
                                    </div>
                                </div>
                                <!-- End Address -->
                        </div>
                    </div>

With css:

/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}

.row-centered {
    text-align: center;
    margin-bottom: 40px;
}

Jsfiddle:

https://jsfiddle.net/L7L8dryd/

Did you try searching for a solution here on stackoverflow? This question has already been answered multiple times. For example [here](http://stackoverflow.com/a/19695851/1765877) or [here](http://stackoverflow.com/a/23288066/1765877). — Dygestor, Oct 09 '15 at 13:21

CreativePS · Accepted Answer · 2015-10-13T11:59:05.770

1

This work well for me, hope it will resolve your issue.

Change this class and add table-cell as display value.

.col-centered{
 display:table-cell; 
}

edited Oct 13 '15 at 11:59

answered Oct 09 '15 at 13:24

CreativePS

1,105
7
15

1

This didn't work unfortunately. – twan Oct 09 '15 at 13:29
I checked again, please try and apply "equal_height" class to all the divs. I have updated the code – CreativePS Oct 09 '15 at 14:04
1

I did add equal_height as a class name to all divs But still it doesn't work for me. Maybe I have to add that these are 5 columns. So I am using offset 1. Maybe that doesn't work with your solution? – twan Oct 13 '15 at 10:33
No No, it will work fine, sorry I missed a (dot.) in the script. please use this updated code.. it'll work. :) – CreativePS Oct 13 '15 at 10:38
I added everything you posted, but still this is the footer: https://gyazo.com/fe17c9865ef266335ac4b3b8395686cb This is one colum block for example: https://gyazo.com/aee365b82eb84996bdc07bfc85f690c3 – twan Oct 13 '15 at 11:33
can i see the URL? I can debug and tell you the exact fix after seeing – CreativePS Oct 13 '15 at 11:38
Can I message you somewhere so that the link is not public here on stackoverflow? – twan Oct 13 '15 at 11:40
Change this class and add table-cell as display value. .col-centered{ display:table-cell; } – CreativePS Oct 13 '15 at 11:54
great! please vote ^ too :) – CreativePS Oct 13 '15 at 12:06
1

My reputation is too low, I will when I have enough – twan Oct 13 '15 at 14:06

score 0 · Answer 2 · answered Oct 09 '15 at 13:20

0

You can use only bootstrap to do this, see this example at bootstrap.

answered Oct 09 '15 at 13:20

Túlio Castro

1,313
10
17

This did not work for me in Firefox unfortunately. I only have to add that class? No CSS? – twan Oct 09 '15 at 13:32
Oh yes, there is a css, it is not a default yet (it will in bootstrap4) , here is the css link, used in bootstrap example: http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css i hope it helps – Túlio Castro Oct 09 '15 at 13:35
Thank you,but this stacks the columns on top of eachother :P – twan Oct 09 '15 at 13:36
Hmmmm, so, see if this can help you http://stackoverflow.com/questions/32867594/how-can-i-place-column-content-on-the-bottom/32868004#32868004 just change from "bottom" to "middle" or you can provide us a fiddle to help – Túlio Castro Oct 09 '15 at 13:38
Maybe it has something to do with the padding-right: 0px; ? It was already in the template so maybe it's best not to remove it – twan Oct 09 '15 at 13:39
I added a fiddle: https://jsfiddle.net/L7L8dryd/ – twan Oct 09 '15 at 13:42
See if is what you want, https://jsfiddle.net/L7L8dryd/1/ if not, what else you need – Túlio Castro Oct 09 '15 at 13:47
I see it still floats to the right when i resize the screen. I want it to stay centered, and stack upon eachother when resizing it to phone size. – twan Oct 09 '15 at 14:02

Create 5 columns of equal height

2 Answers2