Vertical alignment within Bootstrap grid - css

Question

It seems like a simple question, but I simply can't find an answer.
This fiddle should be fairly straightforward:
http://fiddle.jshell.net/52VtD/4040/
<div class="panel panel-default entete" >
<div class="row">
<div class="col-md-6">
<div class="title">
to be centered vertically
</div>
</div>
<div class="col-md-2">
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
<div class="col-md-2">
Text
</div>
<div class="col-md-2">
Text
</div>
</div>
</div>
I'm trying to align vertically the contents of the first column relatively to the others.
If the window is resized (and there is no column to its right), the first column should be as high as its content (cannot use a fixed height).

Answer 1

The correct way to do this using Bootstrap 4 Grid is by using one of then align-items-... classes on the .row element, or align-self-... on the .col elements.
In the case of the OP's original request, the best implementation would be
<div class="col-md-6 align-self-center">
<div class="title">
to be centered vertically
</div>
</div>
If you wanted to, for example, set all of the .col elements to be aligned to the bottom vertically, you would set align-items-end on the .row element like so:
<div class="row align-items-end">
Source: https://getbootstrap.com/docs/4.0/layout/grid/#vertical-alignment

Answer 2

Check out this http://fiddle.jshell.net/52VtD/4043/
<div class="panel panel-default entete" >
<div class="row" style="display:table">
<div class="col-md-6" >
<div class="title" style="display:cell;vertical-align:middle">
to be centered vertically
</div>
</div>
<div class="col-md-2">
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
<div class="col-md-2">
Text
</div>
<div class="col-md-2">
Text
</div>
</div>
</div>

Answer 3

http://fiddle.jshell.net/8uzn7fou/2/
HTML:
<div class="panel panel-default entete" >
<div class="row" >
<div class="col-md-6 title_div" >
<div class="title" >
to be centered vertically<br/> to be centered vertically
</div>
</div>
<div class="col-md-2">
<p>Text</p>
<p>Text</p>
<p>Text</p>
</div>
<div class="col-md-2">
Text 2
</div>
<div class="col-md-2">
Text 3
</div>
</div>
</div>
CSS:
.title_div{
display: table;
}
.title{
height:100%; display: table-cell!important;
vertical-align: middle;
}
JQ:
function setHeight()
{
var max=0;
$('.entete .col-md-2').each(function(){
var h=$(this).height();
if(h>max) max=h;
})
$('.title_div').height(max);
}
setHeight()
Note: In function setHeight () should be added to check the width of the window in order not executed for smaller screens