Почему не работает вёрстка?

Question

[RushV]

Здравствуйте!
Bootstrap 5.
Почему не перемещается блок align-items-endвниз ?

<div class="card h-100 cart-a mb-3">
            <div class="row g-0 h-100">
                <div class="col-md-8">
                    <h2 class="card-title m-0">СТУДЕНТ</h2>
                    <p class="card-subtitle-a text-blue mb-0 text-uppercase">запишись сейчас и получи скидку</p>
                    <p class="card-text">Студенческая скидка действует при предъявлении студенческого билета, продленного на текущий год.</p>
                    <div class="d-flex align-items-end"><!---Этот блок-->
                      <a href="#" class="btn btn-primary-p py-2 px-5 text-uppercase fw-bold position-relative">записаться</a>
                    </div>
                </div>
                <div class="col-md-4">
                    <img src="/img/s.jpg" class="img-fluid rounded-end" alt="...">
                </div>
            </div>
        </div><!--card-END-->

Comments

[Сергей delphinpro]

а должен?

[RushV]

Сергей delphinpro, ну да, а где ошибка?

[Ivan Ustûžanin]

RushV, нет, не должен, т.к. места он занимает ровно столько, сколько ему нужно, а не растягивается по оставшейся высоте

[RushV]

IvanU7n, А как мне лучше сверстать, вернее как правильно что бы этот блок переместить вниз?

[Ivan Ustûžanin]

RushV, как в бутстрапе не знаю
но в общем на ячейку display: grid; c 1fr для последней строки, т.е. что-то типа grid-template-rows: auto auto auto 1fr; тогда этому блоку можно сделать align-self: end; и убрать оттуда flex

[Сергей delphinpro]

RushV, Это вот так работает:

<div class="d-flex align-items-end">
  <div> 1 </div>
  <div> 2 </div>
</div>

------------------------------------------------
|  --------------------                        |
|  |  1               |                        |  .d-flex.align-items-end
|  |                  |  --------------------  |  
|  |                  |  |  2               |  |
|  |                  |  |                  |  |
|  --------------------  --------------------  |
------------------------------------------------