How can I get my Bootstrap columns expand with the same height

Report · Oct 16, 2017

Here is my code https://codepen.io/anon/pen/qPQjjp . As you can see, when the screen gets smaller, the columns don't stay at the same height. I have tried so far display: table; flexbox; row-eq-height; matchheight.js, and none of these methods worked.

Report · Oct 17, 2017

First, clean up the html code a bit, as shown below. No need to wrap everything in <p></p> tags, that just over-populates the html and makes it more difficult to manage.

<h3>Build or improve your mobile site</h3>

<img src="<?php echo get_template_directory_uri(); ?>/images/mobile.png" alt="smartphone icon" />

</figure>

<p>We can build your mobile website from scratch or improve the usability and layout of an existing one. To rank higher on Google Search, Google demands that you deliver a great user experience on all platforms.</p>

</div>

<h3>Convert your HTML site to Wordpress</h3>

<img src="<?php echo get_template_directory_uri(); ?>/images/wordpress.png" alt="wordpress icon" />

</figure>

<p>Static or HTML websites are great when we don't need to update them often, but when we want to offer dynamic content, Wordpress is the best option. We can make any HTML site to work on Wordpress</p>

</div>

<h3>Improve your site performance</h3>

<img src="<?php echo get_template_directory_uri(); ?>/images/speed.png" alt="speed icon" />

</figure>

<p>One of the metrics Google uses to rank websites on its search engine is the load speed, especially on mobile devices. Besides, you got more chances to convert customers if your pages load faster. </p>

</div>

</div>

</div>

Then use the below css styles. These should go in a custom css style sheet linked to the page AFTER the link to the default Bootsrap css file OR you can put them in the <head></head> section of the page between <style></style> tags AFTER the link to the default Bootstrap css file.

.feature1 {

display: flex;

flex-wrap: wrap;

margin-left: auto;

margin-right: auto;

max-width: 1000px;

}

.col-sm-4 {

display: flex;

}

.well {

flex: 1;

}

.well h3 {

text-align: center;

}

.well figure {

text-align: center;

}

Bootstrap 4 now deploys Flexbox as standard. No one should be using Bootstrap 3 any longer if they are starting out on a project, its outdated.

Report · Oct 17, 2017

Thank you. That really worked. I couldn't find this solution anywhere.

Report · Oct 17, 2017

Bootstrap 4 supports equal height columns with CSS Flexbox Layouts.

Simply replace what you have now with links to the newest Bootstrap & jQuery libraries.

And use this class for your ROWS

row-eq-height

EQUAL HEIGHT COLUMNS GO HERE

</div>

Nancy O'Shea— Product User, Community Expert & Moderator

How can I get my Bootstrap columns expand with the same height

1 Correct answer

Photos