Skip to main content
pierremg
pierremg
New Participant
October 17, 2017
Answered

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

  • October 17, 2017
  • 1 reply
  • 4479 views

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.

This topic has been closed for replies.
Correct answer osgood_

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.

<div class="container-fluid ">

<div class="row feature1">

<div class="col-sm-4">

<div class="col-sm-12 well feature1-box">

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

<figure>

<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>

</div>

<!-- end col-sm-4 -->

<div class="col-sm-4">

<div class="col-sm-12 well feature1-box">

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

<figure>

<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>

</div>

<!-- end col-sm-4 -->

<div class="col-sm-4">

<div class="col-sm-12 well feature1-box"><p>

<h3>Improve your site performance</h3>

<figure>

<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>

<!-- end col-sm-4 -->

</div>

<!-- end row -->

</div>

<!-- end container-fluid -->

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.

1 reply

O
osgood_Correct answer
Brainiac
October 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.

<div class="container-fluid ">

<div class="row feature1">

<div class="col-sm-4">

<div class="col-sm-12 well feature1-box">

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

<figure>

<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>

</div>

<!-- end col-sm-4 -->

<div class="col-sm-4">

<div class="col-sm-12 well feature1-box">

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

<figure>

<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>

</div>

<!-- end col-sm-4 -->

<div class="col-sm-4">

<div class="col-sm-12 well feature1-box"><p>

<h3>Improve your site performance</h3>

<figure>

<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>

<!-- end col-sm-4 -->

</div>

<!-- end row -->

</div>

<!-- end container-fluid -->

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.

pierremg
pierremgAuthor
New Participant
October 17, 2017

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

Nancy OShea
Nancy OShea
Community Expert
October 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.

<!--Bootstrap 4 CSS-->

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<!--latest jQuery 3-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Popper JS-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<!--latest Bootstrap 4 JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

And use this class for your ROWS

row-eq-height

<div class="container">

     <div class="row-eq-height">

          EQUAL HEIGHT COLUMNS GO HERE

     </div>

</div>

Nancy O'Shea— Product User, Community Expert & Moderator
Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices