Как зафиксировать элемент с классом "bl" внизу с помощью Bootstrap 5? 

Здравствуйте! <br/> Каким образом можно прижать элемент div с классом bl к нижней части родительского элемента? <br/> <pre><code>&lt;div class="card mb-3 bg-transparent post-box"&gt;
                &lt;div class="row g-0"&gt;
                  &lt;div class="col-12 col-lg-auto"&gt;
                    &lt;img src="/img/post/img-post-1.jpg" class="img-fluid rounded-start w-260" alt="..."&gt;
                  &lt;/div&gt;
                  &lt;div class="col-12 col-lg"&gt;                    
                        &lt;div class="card-body px-post"&gt;
                          &lt;h3 class="card-title"&gt;Текст&lt;/h3&gt;
                            &lt;p class="card-text"&gt;Текст2&lt;/p&gt;
                            &lt;div class="bl"&gt;
                              &lt;div class="row"&gt;
                                &lt;div class="col"&gt;
                                    &lt;span class="data-post"&gt;14.05.2025&lt;/span&gt;
                                &lt;/div&gt;
                                &lt;div class="col-auto"&gt;
                                  &lt;a href="#"&gt;Подробнее &gt;&gt;&lt;/a&gt;
                                &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;</code></pre>
  • 22 апреля 2025 г. 15:55
Ответы на вопрос 2 
Чтобы зафиксировать элемент с классом `bl` внизу родительского элемента, можно использовать CSS Flexbox, который поддерживается в Bootstrap 5. Для этого вам нужно будет добавить некоторые стили к родительскому элементу, чтобы расположить элементы внутри него.

Вот пример того, как вы можете этого достичь:

1. Убедитесь, что родительский элемент (в данном случае `card-body`) имеет свойство `display: flex`.
2. Установите свойство `flex-direction: column` для вертикального расположения элементов.
3. Добавьте `margin-top: auto` для элемента с классом `bl`, чтобы он сдвигался вниз.

Вот как ваш код может выглядеть с добавлением необходимых стилей:

```html
<div class="card mb-3 bg-transparent post-box">
    <div class="row g-0">
        <div class="col-12 col-lg-auto">
            <img src="/img/post/img-post-1.jpg" class="img-fluid rounded-start w-260" alt="...">
        </div>
        <div class="col-12 col-lg">                    
            <div class="card-body d-flex flex-column h-100 px-post">
                <h3 class="card-title">Текст</h3>
                <p class="card-text">Текст2</p>
                <div class="bl mt-auto">  <!-- Добавьте mt-auto для прижатия к низу -->
                    <div class="row">
                        <div class="col">
                            <span class="data-post">14.05.2025</span>
                        </div>
                        <div class="col-auto">
                            <a href="#">Подробнее &gt;&gt;</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

Также не забудьте добавить класс `h-100` к `card-body`, чтобы он занимал всю высоту родительского элемента, что позволит правильно разместить элементы внутри него.

Теперь ваш элемент с классом `bl` будет прижат к нижней части `card-body`.
Aragorn , Спасибо, всё получилось.
Похожие вопросы
    Показать ещё