Bootstrap equal column heights (Vertically aligning images using bottom)

Question

Link to live version: http://45.55.186.46/test/

I have a set of sections where i would like to vertically align the images using the bottom attribute. However currently the columns are not the same height. When i try to add the height: 100% attribute to all the parent tags, the image enlarges in size and overflows the section. Any help would be appreciated.

Thanks

HTML

<div class = "container-fluid lookbook sectionContainer">
        <div class = "row lookbookRow">
            <div class = "col-md-6">
                <img class = "img-responsive lookbook1" src = "img/lookbook1.jpg" alt = "lookbook1" >
            </div>
            <div class = "col-md-6">
                <div class = "row">
                    <div class = "col-md-6">
                        <img class = "img-responsive desktopOnly lookbook2" src = "img/lookbook2.jpg" alt = "lookbook2" >
                    </div>
                    <div class = "col-md-6  lookbookText section">
                        <h1> <strong> LEARN THE <br> PRINT RULES </strong></h1>
                        <h2> <strong> Take a lesson in 'how to wear print' from fashion aficionado, TV presenter and newly crowned 'Print Princess', Laura Jackson. </strong></h2>
                        <div style = "text-align: center">
                            <button id = "lookbookButton"> <strong> VIEW THE LOOKBOOK > </strong></button>
                        </div>
                    </div>
                </div>
                <div class = "row secondaryImages">
                    <div class = "col-xs-7">
                        <img class = "img-responsive" src = "img/lookbook3.jpg" alt = "lookbook3">
                    </div>
                    <div class = "col-xs-5">
                        <img class = "img-responsive lookbook4" src = "img/lookbook4.jpg" alt = "lookbook4">
                    </div>
                </div>
            </div>
        </div>
    </div>

Section CSS

.lookbook {
padding-top: 10px;
padding-left: 0px;
padding-right: 0px;
}

#lookbookButton {
font-family: "chantilly-light", sans-serif;
text-align: center;
background-color: #C3D5EF;
border-radius: 0px;
border: none;
color: #000000;
letter-spacing: 2px;
padding:15px;
font-size: 22px;
}

.lookbookText {
height: 100%;
}

.lookbook2 {
height: 400px;

}

.lookbookRow {
margin: 0px;
}

.lookbook4 {

bottom: -100px;
}

.secondaryImages {
padding-top: 20px;

}

Global CSS

html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden; 


}

.bannerRow h2 {
font-family: "chantilly-light", sans-serif;
letter-spacing: 1px;
text-align: center;
font-size: 24px;
color: #333333;
padding-top: 10px;
padding-bottom: 10px;
}

.bannerRow h1 {
font-family: "chantilly-light", sans-serif;
text-align: center;
font-size: 49px;
letter-spacing: 5px;
color: #345e91;
}

.sectionContainer {
margin-top: 20px;
}

.section h1 {
font-family: "chantilly-light", sans-serif;
text-align: center;
font-size: 40px;
letter-spacing: 8px;
color: #000000;
}

.section h2 {
font-family: "chantilly-light", sans-serif;
text-align: center;
font-size: 24px;
padding-bottom: 20px;
letter-spacing: 3px;
color: #000000;
}

.mobileOnly {
display:none;
}

possible duplicate of [How can I make Bootstrap columns all the same height?](http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height) — BENARD Patrick, May 07 '15 at 13:51

score 0 · Answer 1 · answered May 07 '15 at 15:36

Did some experimenting on your test page and got an adequate css only solution. Set the .col-* class that you want to vertically align to bottom to the following css:

  float: none;
  display: inline-block;
  vertical-align: bottom;

Then set the parent row to display: table; to make up for the extra padding that inline-block creates and it should align correctly. It will still require a bit of finessing for some of your more complicated rows but seems to work well.

Bootstrap equal column heights (Vertically aligning images using bottom)

1 Answers1