Конфликт bootstrap 4 и angular 4 - некорректно вычисляется высота блоков

Как сделать страницу аналогично https://startbootstrap.com/template-overviews/3-col-portfolio/ с boostrap 4 и angular 4?
Изначально использовались boostrap 3 и angular 4, пытался сделать страницу по примеру, в котором используется bootstrap 4 https://startbootstrap.com/template-overviews/3-col-portfolio/ https://blackrockdigital.github.io/startbootstrap-3-col-portfolio/
вот мои попытки с моей версией boostrap 3 http://jsfiddle.net/96thessa/4/ здесь вроде бы все работает аналогично, но если добавляется angular, место под изображение растягивается на высоту всего блока, а текст съезжает. при использовании angular происходит следующее https://imgur.com/9IZ1Jvx размеры пустой картинки: https://imgur.com/z3sqNoe вначале блоки отображаются аналогично http://jsfiddle.net/96thessa/4/ но через мгновение пустая картинка занимает всю высоту блока и выталкивает текст ниже границы блока. С bootstrap 4 ситуация аналогичная.
Страница - компонент angular, соответственно, boostrap скрипт и стили подгружаются в индексе, а стиль самого компонента содержит правила для классов card, card-img-top и т.д. На jsfiddle.net не знаю, как эти все нюансы воспроизвести с учетом angular. Возможно, angular вносит смуту? Влияет ли порядок загрузки стилей на расчет размера картинки? Или boostrap не стоит подключать через link и script в html файле, а лучше каким-то другим способом? Влияет ли angular на отображение изображений таким образом? В стилях в инспекторе браузера не увидел ничего дополнительного, что бы могло исказить отображение. Пробовал использовать изображение, не обрамленное ссылкой a, результат тот же.
Update: архив тестовые исходники
Update: пока костыльное решение - не показывать несуществующие изображения (display: none), но блоки все равно почему-то растягиваются больше, чем нужно, в высоту. Пытался заменить margin-ы на padding-и, эффект не особо изменился, автоматический расчет высоты блока происходит неверно, я полагаю, проблема не в изображениях, а в самих блоках.
Update: пытаюсь устранить конфликт angular и bootstrap, используя ng-bootstrap. Выполнил установку npm install --save @ng-bootstrap/ng-bootstrap, убрал подключение bootstrap.min.js и jquery.min.js, оставив только подключение bootstrap.min.js (4.0.0-beta.2). В app.module.ts внес изменения:
import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; ...
@NgModule({ ... imports: [ ... NgbModule.forRoot(), ... ], providers: [ ... ], bootstrap: [AppComponent] }) ...
Высота блоков по-прежнему рассчитывается некорректно.
Ссылка на страницу
Update: добавил стили
.h-100[_ngcontent-c3] { height: auto !important; } .h-100 { height: auto!important; } .h-100[_ngcontent-c4] { height: auto !important; } .container[_ngcontent-c3] .card[_ngcontent-c3] { height: auto !important; }
и убрал
.h-100 { height: 100%!important; }
результат: https://i.imgur.com/ULzNpFK.png Внешние дивы для блоков имеют корректную высоту, но .card сжимается по контенту по высоте, и соседние колонки не выравниваются в итоге по высоте, хотя стиль height: auto !important; применяется. Проверял в chrome, firefox. Искомая страница, с которой сделан скриншот Ссылка на страницу

Ответ

Вы не указали стили к классу .row
.row { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
Результат:

Обновление 0.0.1:
На предоставленном ресурсе возможно поправить верстку внеся вот такие изменения:
Удалите css код:
.h-100[_ngcontent-c3] { height: 100% !important; } .h-100 { height: 100%!important; }
Если нет возможности удалить, замените на height: auto important;
После для выравнивания вы можете написать:
.portfolio-item[_ngcontent-c3] { margin-bottom: 30px; display: flex; }
И если размер картинок будет всегда один сделать вот так:
.card.h-100 img { max-height: 200px; }
В итоге вы получите вот такой результат:
Вариант №1 С картинкой но битой ссылкой
Вариант №2 Полностью без картинки(без тега < img >)