0
<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 буду рад любым советам

1 ответ 1

2

Колонке задаёте класс 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/

2
  • Работает спасибо, и отдельная благодарность за ссылку с примерами
    – Cepesh16
    11 апр 2019 в 12:54
  • @Cepesh16, рад помочь :) 11 апр 2019 в 12:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.