Как правильно сверстать на bootstrap кнопку внизу блока?

Question

[Павел]

Вроде нечего сложного , но как прижать кнопку к низу блока чтоб не сломать адаптивность вот вопрос?

Comments

[sergey]

не вижу сложности, даже интересно стало: что у вас не выходит-то?

[Павел]

SM: если кнопку делать через абсолют ботом 0 , она будет кривая на xs дейвайсах , если делать margin-top то не ясно сколько будет текста над кнопкой

[sergey]

mrusklon: ну так дайте тексту margin-bottom... и отодвиньте тем самым кнопку, отступ задайте в vh

[Serj-One]

mrusklon: Абсолютом, и нижний padding для обёртки. Что там будет криво на xs совершенно непонятно.

[Павел]

Serj-One: codepen.io/mrusklon/pen/NdqzyR

Answer 1

[sergey]

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <div class="image"></div>
    </div>
    <div class="col-xs-6">
      <div class="info-block">
        <div class="title">Заголовок</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <button>Позвонить</button>
      </div>
    </div>
  </div>
</div>

и стилями расстояние... все

Comments

[Павел]

codepen.io/mrusklon/pen/NdqzyR

Answer 2

[Максим Конов]

Вроде в бутстрапе нет выравнивания по вертикали. Только ручками через стили.

Comments

[Павел]

codepen.io/mrusklon/pen/NdqzyR

[Максим Конов]

mrusklon: суть коммента в том, чтобы показать горизонтальное выравнивание у ссылки (хотя я говорил о вертикальном)? P.S. в BS3.

Answer 3

[Сергей]

Если включить flexbox в BS4 (рекомендую забить на 1% пользователей IE8 и начать пользоваться флексом)

Тогда ставим кнопке

.btn{
  align-self: flex-end
}