Making Two Different Rows In Bootstrap Have Same-height Elements

I asked a similar question that I'll go delete because this one specifically focuses on my true issue: making them the same height. I have two different rows in bootstrap, one with

Solution 1:

Well you need to add 4th item then with class col-sm-4 portfolio-item dontwantpadding with extra class ie. leftShifted. Apply same class to 2nd and 3rd column so you'll have col-sm-4 portfolio-item dontwantpadding leftShifted. Your markup will look:

<divclass="col-sm-4 portfolio-item dontwantpadding"><ahref="#portfolioModal4"class="portfolio-link"data-toggle="modal"><divclass="caption"><divclass="caption-content"><iclass="fa fa-search-plus fa-3x"></i></div></div><imgsrc="img/portfolio/ALS.jpg"class="tri-Up img-responsive"alt=""></a></div><divclass="col-sm-4 portfolio-item dontwantpadding leftShifted"><ahref="#portfolioModal5"class="portfolio-link"data-toggle="modal"><divclass="caption"><divclass="caption-content"><iclass="fa fa-search-plus fa-3x"></i></div></div><imgsrc="img/portfolio/kickinit.jpg"class="tri-Down img-responsive"alt=""></a></div><divclass="col-sm-4 portfolio-item dontwantpadding leftShifted"><ahref="#portfolioModal6"class="portfolio-link"data-toggle="modal"><divclass="caption"><divclass="caption-content"><iclass="fa fa-search-plus fa-3x"></i></div></div><imgsrc="img/portfolio/MarshMad.jpg"class="tri-Up img-responsive"alt=""></a></div><divclass="col-sm-4 portfolio-item dontwantpadding leftShifted"><ahref="#portfolioModal5"class="portfolio-link"data-toggle="modal"><divclass="caption"><divclass="caption-content"><iclass="fa fa-search-plus fa-3x"></i></div></div><imgsrc="img/portfolio/kickinit.jpg"class="tri-Down img-responsive"alt=""></a></div>

Then you need to shift your 2nd, 3rd and 4th element with negative margin, like so:

.col-sm-4.portfolio-item.dontwantpadding.leftShifted{
   margin-left: -130px;
}   

Obviously you need to adjust your margins between rows. Hope this help

Solution 2:

@Robjez I got it to work! I ended up using the below css to shift the positions of the portfolio-items in. Both rows got corrected.

.portfolio-item:first-child {
    position: relative;
    left: 15%;
}

.portfolio-item:last-child {
    position: relative;
    left: -15%;
}