Как выровнять label по нижнему краю в BOOTSTRAP5?

Question

[cicatrix]

Опять бэка пихнули во фронт...
Прошу помощи (см. рис.)

Есть ли способ чистым bootstrap отравнять по низу?

Вёрстка такая:

<div class="row mt-1">
                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-12">
                    <div class="form-group align-text-bottom">
                        <label for="MinPrice" class="form-control-plaintext">
                            Минимальная цена:&nbsp;
                            <i class="bi-question-circle-fill text-primary" role="img" aria-label="?"
                               data-bs-toggle="tooltip"
                               data-bs-placement="right"
                               title="Ниже этой величины на витрине с учётом всех скидок цена опуститься не может."></i>
                        </label>
                         <input id="MinPrice" name="MinimumPrice" type="number" class="form-control" />
                        <span asp-validation-for="MinimumPrice" class="text-danger"></span>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-12">
                    <div class="form-group align-bottom">
                        <label for="BasePrice" class="control-label">
                            Базовая цена на товар:&nbsp;
                            <i class="bi-question-circle-fill text-primary" role="img" aria-label="?"
                               data-bs-toggle="tooltip"
                               data-bs-placement="right"
                               title="От этой цены рассчитываются все общие и индивидуальные скидки."></i>
                        </label>
                        <input id="BasePrice" name="BasePrice" type="number" class="form-control" default="0" />
                        <span asp-validation-for="BasePrice" class="text-danger"></span>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-12">
                    <div class="form-group align-bottom">
                        <label for="DiscountPercent" class="control-label">
                            Процент общей скидки на товар:&nbsp;
                            <i class="bi-question-circle-fill text-primary" role="img" aria-label="?"
                               data-bs-toggle="tooltip"
                               data-bs-placement="right"
                               title="Скидка указывается в процентах (Например 50 = 50%, то есть базовая цена уменьшится вдвое)."></i>
                        </label>
                        <input id="DiscountPercent" name="DiscountPercent" type="number" class="form-control" default="0" />
                        <span asp-validation-for="DiscountPercent" class="text-danger"></span>
                   </div>
                </div>
            </div>

Comments

[Ankhena]

Например, задать align-self: flex-end для form-group и флекс для родителя.
Или флекс для родителя и align-items: flex-end.
При равной высоте инпутов это даст аналогичный результат.

Как это написать на бутстрапе прочитайте в документации самостоятельно.

[Сергей delphinpro]

<div class="row mt-1 align-items-end">
Если название класса не перепутал

[Сергей delphinpro]

На заметку. В бутстрапе всё-таки используется подход mobile-first, поэтому колоночные классы лучше указывать от меньшего к большему. И не нужно повторять. Кроме того, по умолчанию колонки и так уже 12 размера, так что и этот класс лишний (тут могу ошибиться, но вроде так и есть)

- <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-xs-12">
+ <div class="col-sm-4">

[cicatrix]

Сергей delphinpro, Спасибо большое!