Bootstrap 4 выровнять кнопку вертикально?

135

20 января 2020, 19:20

<div class="row bg-light" style="height:5em">
    <div class="col h-75 bg-info">
        <button class="btn btn-danger">Read the info</button>
    </div>
</div>

Как в Bootrstrap 4 выровнять вертикально по центру кнопку внутри .col?

На align-self-center кнопка не реагирует, vertical-align: middle; тоже без результатно. Пару дней осваиваю bootstrap 4 буду рад любым советам

Answer 1

Колонке задаёте класс d-flex, а кнопке - align-self-center:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
<div class="row bg-light" style="height:5em"> 
    <div class="col h-75 bg-info d-flex"> 
        <button class="btn btn-danger align-self-center">Read the info</button> 
    </div> 
</div>

А вообще есть клёвая шпаргалка по классам bootstrap 4 с интерактивными примерами: https://bootstrap-4.ru/articles/cheatsheet/