Как в bootstrap 4 сделать выравнивание списка по вертикали в зависимости от родителя?

Question

[Stacy None]

В bootstrap 4 есть List group список:

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
</div>

У меня он вставляется в div с левой стороны. Проблема в том что все div блоки разной высоты, а этот список подходит по высоте не под все блоки.
Вопрос: Как сделать чтобы этот список выравнивался по высоте?


Заранее благодарю за внимание и помощь!

Comments

[doweb]

Залейте код на codepen, думаю так быстрее разберемся, что и к чему там. Так как не понятно, каким образом у вас появляется расстояние снизу.

[Stacy None]

Konstantin, https://codepen.io/Stanislavskiy11/pen/baqxLM

[doweb]

Stacy None, Для начала нжно уточнить один момент. Почему задан вопрос про bootstrap 4, а на codepen у вас подключен бутстрап 3?

[Ankhena]

Задавайте родителям 100% высоту или используйте флексы со stretch или их комбинации.
https://codepen.io/anon/pen/BJWOvx
Я дописала свойства прямо к бутстраповским классам, измените на свои.

[Stacy None]

Konstantin, Не заметил, простите, обновил https://codepen.io/Stanislavskiy11/pen/baqxLM

[Stacy None]

Ankhena, Спасибо! то что нужно. С Наступающим! ;)

[Stacy None]

Ankhena, Нееет)) я не ту версию указал)) обновил на bootstrap 4 подскажите пожалуйста как на 4 версии сделать?
Пробовал то что вы показали на 3 версии но не получилось https://codepen.io/Stanislavskiy11/pen/baqxLM

[doweb]

Stacy None, на col-sm-2 повести класс align-self-center

[Stacy None]

Konstantin, Не, мне не нужно центровать список) мне нужно чтобы элементы списка вытягивались с высотой блока)
Но я уже решил это, спасибо!

[Ankhena]

Stacy None, да какая разница https://codepen.io/anon/pen/opZrZJ
Прочитайте самостоятельно про флексы, всяко полезно будет:
https://html5book.ru/css3-flexbox/
https://tproger.ru/translations/how-css-flexbox-works/