Как выровнять текст по вертикали с помощью bootstrap 4

в классе h-50, как мне выровнять текст по нижней части div с помощью начальной загрузки 4

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity = "sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin = "anonymous">
<div style='height:300px;border:1px solid #333;'>
                <div class = "bg-primary d-inline-block h-25">Height 25%</div>
                <div class = "bg-primary d-inline-block text-bottom h-50"><span class='text-bottom'>Height 50%</span></div>
                <div class = "bg-primary d-inline-block h-75">Height 75%</div>
                <div class = "bg-primary d-inline-block h-100">Height 100%</div>
                <div class = "bg-primary d-inline-block h-auto">Height Auto</div>
            </div>

bootstrap-4 vertical-alignment

24.12.2020 21:33

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

144

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Одной из возможностей в Bootstrap 4 было бы использование d-inline-flex flex-column в div h-50, а затем использование d-flex align-items-end h-100 в div, который обертывает диапазон, который вы хотите выровнять внизу:

<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"></script>
<div style='height:300px;border:1px solid #333;'>
  <div class = "bg-primary d-inline-block h-25">Height 25%</div>
  <div class = "bg-primary d-inline-flex flex-column h-50">
      <div class = "bg-secondary d-flex align-items-end h-100">
          <span>Height 50%</span>
      </div>
  </div>
  <div class = "bg-primary d-inline-block h-75">Height 75%</div>
  <div class = "bg-primary d-inline-block h-100">Height 100%</div>
  <div class = "bg-primary d-inline-block h-auto">Height Auto</div>
</div>

25.12.2020 02:34

Другие вопросы по теме

Я хочу выровнять изображения из разных div в моей аккордеонной карте Bootstrap 4 друг над другом

Центрирование элементов в моей сетке нарушило ее границу. Не понимаю, почему

Вертикально центрировать местозаполнитель ввода в Chrome

Выравнивание изображений по базовой линии текста в <div>

Typescript и CSS: выровняйте метку с флажком

Как вертикально центрировать контейнер сетки в CSS?

Я не могу центрировать <h2> по вертикали в теге <div>

Ant Design React: вертикальное выравнивание div внутри столбца

Как сделать экран категории вертикальным и отображать пункт меню рядом?

Flexbox align-self и margin auto

Как выровнять текст по вертикали с помощью bootstrap 4

Ответы 1

Другие вопросы по теме

Похожие вопросы