0

I am using Bootstrap v3.3.5.

I need the first column the same height as the second one with logo on the top and text in the middle. Fixed height is not an option as I want the whole thing to be responsive. Also I do not want to use flex, because of the IE support issue.

I've tried this: .row {display: table; table-layout: fixed;} .col-lg-5 {display:table-cell; vertical-align:middle;} But it didn't work for me.

I have also tried javascript to make the first column the same height as the second one, but it makes problems on wider screens.

Here is my html:

<article class="row">
    <div class="col-lg-5">
        <img class="img-responsive" src="img/uangel/uangellogo.png">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean facilisis sit amet lorem ut aliquet. In hac habitasse platea dictumst. Sed eu vulputate nunc. Aliquam ornare elit lorem, vel aliquam est malesuada sed. Praesent sagittis vitae ante a sollicitudin. Curabitur in dolor eu sem condimentum lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla fermentum ipsum nec odio pulvinar commodo.</p>  
    </div>
    <div class="col-lg-7"> 
        <img class="portfolio-item img-responsive pull-right" src="img/uangel/interior-stairs.png">
        <img class="portfolio-item img-responsive pull-right" src="img/uangel/sticky-notes.png">
    </div>
</article>

Thanks!

Adam Milecki
  • 1,738
  • 10
  • 15
456xe
  • 11
  • 4

1 Answers1

0

I'm waiting for an answer to a similar question I asked not long ago: Bootstrap Vertically Align Column Content with Mobile Optimization.

I may have part of your solution here:

@media (min-width: 768px) {
    .vertical-container{
        position: relative;
    }
    .vertical-center{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
}

So then your code would be like this:

<article class="row vertical-container">
    <div class="col-lg-5 vertical-center">
        <img class="img-responsive" src="img/uangel/uangellogo.png">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean facilisis sit amet lorem ut aliquet. In hac habitasse platea dictumst. Sed eu vulputate nunc. Aliquam ornare elit lorem, vel aliquam est malesuada sed. Praesent sagittis vitae ante a sollicitudin. Curabitur in dolor eu sem condimentum lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla fermentum ipsum nec odio pulvinar commodo.</p>
    </div>
    <div class="col-lg-7"> 
        <img class="portfolio-item img-responsive pull-right" src="img/uangel/interior-stairs.png">
        <img class="portfolio-item img-responsive pull-right" src="img/uangel/sticky-notes.png">
    </div>
</article>

Note, this only works by applying vertical-center to your smallest height column (hence they reason for the question in my post).

Maybe it can spark an idea for the both of us.

Community
  • 1
  • 1
Adam Milecki
  • 1,738
  • 10
  • 15
  • It puts not only text, but also a logo in the center of the column while I need it on top. Also it moves the column 2 so it overlaps column 1. – 456xe Sep 24 '15 at 07:47