Calculating the height of elements in Bootstrap for vertical alignment - html

Question

I am newbie in Bootstrap & HTML.
In my HTML I have a container and a row with 3 columns inside. In my situation, the title of the last section is way longer than others and needs to be displayed in 2 lines.
Because of this, the text of this section is in lower position than it is in other sections.
My question: Is it possible to make all of these texts after headers to be vertically in the same position?
HTML Code example:
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">MAIN_TITLE</h2>
</div>
</div>
<div class="row text-center">
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_1</h4>
<div class="text-muted eqHeight"> TEXT_1</div>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_2</h4>
<div class="text-muted eqHeight"> TEXT_2</div>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_3</h4>
<div class="text-muted eqHeight"> TEXT_3</div>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_4</h4>
<div class="text-muted eqHeight"> TEXT_4</div>
</div>
</div>
</div>
This is how it looks like:

Answer 1

include jQuery and just write javascript for finding and setting the height of bigger one.
function max-height(){
var height=0;
var mHeight=0;
$('.service-heading').each(function(){
height = $(this).height();
if(height>mHeight)
mHeight = height;
});
$('.service-heading').height(mHeight);
height=0;
mHeight=0;
}
then call this function on ready() and resize()
$( document ).ready(function() {max-height();});
$( window ).resize(function() {max-height();});

Answer 2

in your code, text is aligned to center. i have removed it. check comment. then in the long text of title_title_title..so on, i have provided a space which encodes as newline character.
In the column setup, you have provided 'col-md-3' for three time, which makes it three-fourth of the width. so changed it to " col-md-3 , col-md-3 , col-md-6".
check out this.
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2 class="section-heading">MAIN_TITLE</h2>
</div>
</div>
<div class="row "> // removed text-center
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_1</h4>
<div class="text-muted"> TEXT_1</div>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_2</h4>
<div class="text-muted"> TEXT_2</div>
</div>
<div class="col-md-6"> // here col-md-3 changed to col-md-6
<span class="fa-stack fa-4x">
<i class="fa fa-circle fa-stack-2x text-primary"></i>
<i class="fa fa-search fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_TITLE _TITLE_TITLE_TITLE_TITLE_ TITLE_TITLE_TITLE_TITLE_TITLE_TITLE_3</h4> // here provided with a space.
<div class="text-muted"> TEXT_3</div>
</div>
</div>
</div>

Answer 3

Changed answer: Now that I get what you're asking here, I would recommend using eqHeight library (jQuery). It works like a charm with Bootstrap and what it does is that it automatically calculates the height of the tallest element and adjusts the height of others to same.
In this case you could do the following:
<div class="row">
<div class="col-md-4">
<i class="service-heading eqHeight">Content here</i>
<i>More content here!</i>
</div>
<div class="col-md-4">
<i class="service-heading eqHeight">Content here</i>
<i>More content here!</i>
</div>
<div class="col-md-4">
<i class="service-heading eqHeight">Content here</i>
<i>More content here!</i>
</div>
</div>
The point is to make the eqHeight library point to the .eqHeight class and make it calculate the upper elements (in this case .service-heading classes) to be the same height.
This might require an additional CSS, but shouldn't be more than just height and max-height properties.
Vertical positioning is a slight problem with responsive design. Another solution for this would be of making an additional row below the existing one and setting the same cols in there, but that of course doesn't work when the site breaks up for mobile.