I've made a resizable template using bootstrap4 css. In OK in all browsers except IE 11.0.
To be sure .d-flex class doesn't works properly (I've used it to make all of my columns of the same height). Googling for solution doesn't make progress. If I remove this class all seems to be OK except the same height of columns.
But the most interesting thing happens with images - they really displayed at full size in ie. Also tried different fixes from here - Bootstrap Image Responsive messed up on IE and no luck. I can fit image in container without .d-flex but anyway there are a lot of clickable white space below image and text.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title 1 here</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row" style="border-bottom:#dedede solid 1px; min-width:615px !important;">
<div class="brd_black align-self-center bg-white vertical-align col-4 col-xs-4" style="height:90px;">
<a href="index.html"><img src="http://playak.com/media/reviews/photos/original/ca/22/a7/boats_490-1.jpg" alt=""></a>
</div>
<div class="brd_black col-8 bg-white vertical-align">
<h4>Title 1 here</h4></div>
</div>
<!-- 2nd row -->
<div class="row mt-4">
<div class="brd_black align-self-center col"> </div>
<div class="brd_black align-self-center col-10">
<div class="row">
<div class="brd_black col-12 bg-white align-top brd_grey pb-3 pt-3">
<h4 class="text-dark">Title 2 here:</h4>
<div class="alert alert-warning font-weight-bold" role="alert">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus neque, interdum eu venenatis ac, ultricies eu justo. Pellentesque at feugiat libero, non tincidunt est. Ut velit sapien, dictum eu lorem eget, interdum faucibus libero. Nam lobortis varius sem at cursus.</div>
<!-- 0d -->
<div class="row mt-4">
<div class="col-sm-4 d-flex align-items-stretch">
<div class="card">
<a href="https://google.com" target="_blank"><img class="card-img-top" src="http://www.oakridgesmoraine.org/wp-content/uploads/2018/08/fallflowers.jpg" alt=""></a>
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur</h5>
<p class="card-text"><span class="text-info font-weight-bold">Nunc purus:</span> Nunc imperdiet dignissim maximus. <br />
<span class="text-info font-weight-bold">О Nunc purus:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus neque, interdum eu venenatis ac, ultricies eu justo.<br />
<span class="text-info font-weight-bold">nteger vel ex id le:</span> mixed<br>
<span class="text-info font-weight-bold">Curabitur faucibus tortor:</span> 8 ch.<br>
</p>
<a href="https://google.com" target="_blank" class="btn btn-primary">Open url etc etc etc</a>
</div>
</div>
</div>
<div class="col-sm-4 d-flex align-items-stretch">
<div class="card">
<a href="https://google.com" target="_blank"><img class="card-img-top" src="http://www.oakridgesmoraine.org/wp-content/uploads/2018/08/fallflowers.jpg" alt="Card image cap"></a>
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur</h5>
<p class="card-text"><span class="text-info font-weight-bold">Nunc purus:</span> Suspendisse et eleifend sem. <br />
<span class="text-info font-weight-bold">О Nunc purus:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus neque, interdum eu venenatis ac, ultricies eu justo.<br />
<span class="text-info font-weight-bold">nteger vel ex id le:</span> mixed<br>
<span class="text-info font-weight-bold">Curabitur faucibus tortor:</span> 75 ch.<br>(30 ch. оch.ого обуch.ния)
</p>
<a href="https://google.com" target="_blank" class="btn btn-primary">Open url etc etc etc</a>
</div>
</div>
</div>
<div class="col-sm-4 d-flex align-items-stretch">
<div class="card">
<a href="https://google.com" target="_blank"><img class="card-img-top"src="http://www.oakridgesmoraine.org/wp-content/uploads/2018/08/fallflowers.jpg" alt="Card image cap"></a>
<div class="card-body">
<h5 class="card-title">РLorem ipsum dolor sit amet, consectetur</h5>
<p class="card-text"><span class="text-info font-weight-bold">Nunc purus:</span> Suspendisse potenti. Integer vel ex id lectus ultrices scelerisque. Dsdfccvds.<br />
<span class="text-info font-weight-bold">О Nunc purus:</span> Praesent ut orci sed velit sagittis finibus at vel odio. Curabitur posuere a dolor eget commodo. In hac habitasse platea dictumst.<br />
<span class="text-info font-weight-bold">nteger vel ex id le:</span> mixed<br>
<span class="text-info font-weight-bold">Curabitur faucibus tortor:</span> 15,4 ch.<br>
</p>
<a href="https://google.com" target="_blank" class="btn btn-primary">Open url etc etc etc</a>
</div>
</div>
</div>
</div>
<!-- /0d -->
</div>
<div class="brd_black align-top col-6">
<!-- Corusel -->
<!-- below corusel -->
<!-- /Corusel -->
</div>
</div>
</div>
<div class="brd_black align-self-center col"> </div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
</body>
</html>Answered from IE11 as a guest . (G-CYR)
.card {
max-width: 99.99%;/* cure the image width going nuts */
}
.card * {
flex: 0 0 auto;/* avoids those extra large empty gaps */
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Title 1 here</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row" style="border-bottom:#dedede solid 1px; min-width:615px !important;">
<div class="brd_black align-self-center bg-white vertical-align col-4 col-xs-4" style="height:90px;">
<a href="index.html"><img src="http://playak.com/media/reviews/photos/original/ca/22/a7/boats_490-1.jpg" alt=""></a>
</div>
<div class="brd_black col-8 bg-white vertical-align">
<h4>Title 1 here</h4>
</div>
</div>
<!-- 2nd row -->
<div class="row mt-4">
<div class="brd_black align-self-center col"> </div>
<div class="brd_black align-self-center col-10">
<div class="row">
<div class="brd_black col-12 bg-white align-top brd_grey pb-3 pt-3">
<h4 class="text-dark">Title 2 here:</h4>
<div class="alert alert-warning font-weight-bold" role="alert">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus neque, interdum eu venenatis ac, ultricies eu justo. Pellentesque at feugiat libero, non tincidunt est. Ut velit sapien, dictum eu lorem eget, interdum faucibus libero. Nam
lobortis varius sem at cursus.</div>
<!-- 0d -->
<div class="row mt-4">
<div class="col-sm-4 d-flex align-items-stretch">
<div class="card">
<a href="https://google.com" target="_blank"><img class="card-img-top" src="http://www.oakridgesmoraine.org/wp-content/uploads/2018/08/fallflowers.jpg" alt=""></a>
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur</h5>
<p class="card-text"><span class="text-info font-weight-bold">Nunc purus:</span> Nunc imperdiet dignissim maximus. <br />
<span class="text-info font-weight-bold">О Nunc purus:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus neque, interdum eu venenatis ac, ultricies eu justo.<br />
<span class="text-info font-weight-bold">nteger vel ex id le:</span> mixed<br>
<span class="text-info font-weight-bold">Curabitur faucibus tortor:</span> 8 ch.<br>
</p>
<a href="https://google.com" target="_blank" class="btn btn-primary">Open url etc etc etc</a>
</div>
</div>
</div>
<div class="col-sm-4 d-flex align-items-stretch">
<div class="card">
<a href="https://google.com" target="_blank"><img class="card-img-top" src="http://www.oakridgesmoraine.org/wp-content/uploads/2018/08/fallflowers.jpg" alt="Card image cap"></a>
<div class="card-body">
<h5 class="card-title">Lorem ipsum dolor sit amet, consectetur</h5>
<p class="card-text"><span class="text-info font-weight-bold">Nunc purus:</span> Suspendisse et eleifend sem. <br />
<span class="text-info font-weight-bold">О Nunc purus:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus neque, interdum eu venenatis ac, ultricies eu justo.<br />
<span class="text-info font-weight-bold">nteger vel ex id le:</span> mixed<br>
<span class="text-info font-weight-bold">Curabitur faucibus tortor:</span> 75 ch.<br>(30 ch. оch.ого обуch.ния)
</p>
<a href="https://google.com" target="_blank" class="btn btn-primary">Open url etc etc etc</a>
</div>
</div>
</div>
<div class="col-sm-4 d-flex align-items-stretch">
<div class="card">
<a href="https://google.com" target="_blank"><img class="card-img-top" src="http://www.oakridgesmoraine.org/wp-content/uploads/2018/08/fallflowers.jpg" alt="Card image cap"></a>
<div class="card-body">
<h5 class="card-title">РLorem ipsum dolor sit amet, consectetur</h5>
<p class="card-text"><span class="text-info font-weight-bold">Nunc purus:</span> Suspendisse potenti. Integer vel ex id lectus ultrices scelerisque. Dsdfccvds.<br />
<span class="text-info font-weight-bold">О Nunc purus:</span> Praesent ut orci sed velit sagittis finibus at vel odio. Curabitur posuere a dolor eget commodo. In hac habitasse platea dictumst.<br />
<span class="text-info font-weight-bold">nteger vel ex id le:</span> mixed<br>
<span class="text-info font-weight-bold">Curabitur faucibus tortor:</span> 15,4 ch.<br>
</p>
<a href="https://google.com" target="_blank" class="btn btn-primary">Open url etc etc etc</a>
</div>
</div>
</div>
</div>
<!-- /0d -->
</div>
<div class="brd_black align-top col-6">
<!-- Corusel -->
<!-- below corusel -->
<!-- /Corusel -->
</div>
</div>
</div>
<div class="brd_black align-self-center col"> </div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
</body>
</html>