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

#css #bootstrap #angular2 #angular4

Как сделать страницу аналогично 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. Искомая страница, с которой сделан
скриншот Ссылка на страницу 
    

Ответы

Ответ 1

Вы не указали стили к классу .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 >)