Вертикальное выравнивание bootstrap 4: Вертикальное выравнивание. Утилиты · Bootstrap. Версия v4.0.0

Вертикальное выравнивание по центру в Bootstrap 4

Важный! Вертикальный центр относительно высоты родительского элемента

Если родительский элемент элемента , который вы пытаетесь центрировать, не имеет определенной
высоты, ни одно из решений вертикального центрирования не будет работать!

Теперь перейдем к вертикальному центрированию…

Bootstrap 5 (обновлено в 2020 году)

Bootstrap 5 по-прежнему основан на flexbox, поэтому вертикальное центрирование работает так же, как и Bootstrap 4. Например, align-items-center и justify-content-center могут использоваться на родителе flexbox ( row или d-flex ). https://codeply.com/p/0VM5MJ7Had

Bootstrap 4

Вы можете использовать новые утилиты размера flexbox &, чтобы сделать container в полный рост и display: flex . Эти параметры не требуют дополнительного CSS (за исключением того,что высота контейнера (ie:html, корпус) должна быть 100% ).

Вариант 1 align-self-center на flexbox ребенка

<div>
    <div>
     I'm vertically centered
    </div>
</div>

https://codeply.com/go/fFqaDe5Oey

Вариант 2 align-items-center на flexbox родителе ( .row — это display:flex; flex-direction:row )

<div>
    <div>
        <div>
            <div>
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

https://codeply.com/go/BumdFnmLuk

Вариант 3 justify-content-center на родителе flexbox ( .card — это display:flex;flex-direction:column )

<div>
    <div>
        <div>
            <div>
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>

https://codeply.com/go/3gySSEe7nd

Подробнее о вертикальном центрировании Bootstrap 4

Теперь, когда Bootstrap 4 предлагает flexbox и другие утилиты , существует множество подходов к вертикальному
выравниванию. http://www.codeply.com/go/WG15ZWC4lf

1 — Вертикальный Центр С Использованием Автоматических Полей:

Другой способ вертикального центра-использовать my-auto . Это приведет к центрированию элемента в его контейнере. Например, h-100 делает строку полной высотой, а my-auto будет вертикально центрировать столбец col-sm-12 .

<div>
    <div>
        <div>Card</div>
    </div>
</div>

Вертикальный Центр С использованием демонстрационных автоматических Полей

my-auto представляет поля на вертикальной оси y и эквивалентно:

margin-top: auto;
margin-bottom: auto;

2 — Вертикальный центр с Flexbox:

Поскольку Bootstrap 4 .row теперь display:flex , вы можете просто использовать align-self-center на любом столбце, чтобы вертикально центрировать его…

       <div>
           <div>
                <div>
                 Center
                </div>
           </div>
           <div>
                <div>
                    Taller
                </div>
          </div>
    </div>

или используйте align-items-center на всем .row , чтобы выровнять по вертикали все col-* в строке…

       <div>
           <div>
                <div>
                 Center
                </div>
           </div>
           <div>
                <div>
                    Taller
                </div>
          </div>
    </div>

Вертикальный Центр Колонны Разной Высоты Демо

Смотрите этот вопрос/ответ по центру, но сохраняйте одинаковую высоту

3 — Вертикальный Центр С Использованием Utils Дисплея:

Bootstrap 4 имеет utils дисплея , которые можно использовать для display:table, display:table-cell , display:inline и т. Д.. Они могут использоваться с утилиями вертикального выравнивания для выравнивания элементов встроенных, встроенных блоков или ячеек таблицы.

<div>
    <div>
        <div>
            I am centered vertically
        </div>
    </div>
</div>

Вертикальный центр С помощью демонстрационного дисплея Utils

Больше примеров

Изображение вертикального центра в <div>

Вертикальный центр .row в .container

Вертикальный центр и дно в <div>

Вертикальный центр ребенок внутри родителя

Вертикальный центр полноэкранный jumbotron

Важный! Я упоминал рост?

Помните, что вертикальное центрирование выполняется относительно высоты родительского элемента. Если вы хотите сосредоточиться на всей странице, в большинстве случаев это должно быть ваше CSS…

body,html {
  height: 100%;
}

Или используйте min-height: 100vh ( min-vh-100 в Bootstrap 4.1+) на parent/container., если вы хотите центрировать дочерний элемент внутри родительского. Родитель должен иметь определенную высоту .

Также см.:

Вертикальное выравнивание в bootstrap 4

Bootstrap 4 Выравнивание центра по вертикали и горизонтали

Bootstrap 4. Flexbox

Раньше Bootstrap использовал 12-ти колоночную сетку. Теперь используется новый режим flexbox, но основные приёмы работы с сеткой остались с небольшими изменениями.

Режим flexbox позволяет макету автоматически вычислять размер каждой колонки.

<div>
  <div>
    <div>
      Половинка
    </div>
    <div>
      Половинка
    </div>
  </div>
  
  <div>
    <div>
      Одна треть
    </div>
    <div>
      Одна треть
    </div>
    <div>
      Одна треть
    </div>
  </div>
</div>

Половинка

Половинка

Одна треть

Одна треть

Одна треть

Безразмерные колонки в сетке flexbox будут поровну делить доступное пространство, всегда заполняя весь ряд.

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

<div>
  <div>
    <div>
      (12 - 6) / 2 = 3
    </div>
    <div>
      6 колонок
    </div>
    <div>
      (12 - 6) / 2 = 3
    </div>
  </div>
  
  <div>
    <div>
      
    </div>
    <div>
      5 колонок
    </div>
    <div>
      
    </div>
  </div>
  
  <div>
    <div>
      
    </div>
    <div>
      4 колонки
    </div>
    <div>
      
    </div>
  </div>
</div>

(12 — 6) / 2 = 3

6 колонок

(12 — 6) / 2 = 3

Используя классы col-{breakpoint}-auto, можно создать блок, размер которого будет определяться его содержимым. Также для блока можно задать классы горизонтального выравнивания. В этом случае общий ряд будет сжат до необходимых размеров.

<div>
  <div>
    <div>
      1 of 3
    </div>
    <div>
      Слово
    </div>
    <div>
      3 of 3
    </div>
  </div>

  <div>
    <div>
      1 of 3
    </div>
    <div>
      Два слова
    </div>
    <div>
      3 of 3
    </div>
  </div>
  
    <div>
    <div>
      1 of 3
    </div>
    <div>
      Здесь три слова
    </div>
    <div>
      3 of 3
    </div>
  </div>
</div>

1 of 3

Два слова

3 of 3

1 of 3

Здесь три слова

3 of 3

Можно оставить стандартное поведение, не сжимая общую ширину.

1 of 3

Два слова

3 of 3

<div>
  <div>
    <div>
      1 of 3
    </div>
    <div>
      Два слова
    </div>
    <div>
      3 of 3
    </div>
  </div>
</div>

Вы можете использовать опорные точки для точного задания размеров колонок. В остальных случаях можно ограничиться классами col и col-*.

<div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
  <div>col</div>
</div>
<div>
  <div>col-8</div>
  <div>col-4</div>
</div>

Из стопки в ряд

Используя классы col-sm-*, вы можете создать базовую сеточную систему, которая разместит блоки в виде стопки на телефонах, а затем будет выводить блоки в один ряд.

<div>
  <div>col-sm-8</div>
  <div>col-sm-4</div>
</div>
<div>
  <div>col-sm</div>
  <div>col-sm</div>
  <div>col-sm</div>
</div>

Смешиваем все классы

Можете комбинировать все классы, как вам нужно.

.col .col-md-8

.col-6 .col-md-4

.col-6 .col-md-4

.col-6 .col-md-4

.col-6 .col-md-4

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div>
  <div>.col .col-md-8</div>
  <div>.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div>
  <div>.col-6 .col-md-4</div>
  <div>.col-6 .col-md-4</div>
  <div>.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div>
  <div>.col-6</div>
  <div>.col-6</div>
</div>

Вертикальное выравнивание

Flexbox дает два способа вертикального позиционирования колонок.

Выравниваем колонки внутри ряда относительно верха, середины, низа, если позволяет высота. Указываем у row классы flex-items-xs-start, flex-items-xs-center, flex-items-xs-end.

По верху

По верху

По верху

По центру

По центру

По центру

По низу

По низу

По низу

<div>
  <div>
    <div>
      По верху
    </div>
    <div>
      По верху
    </div>
    <div>
      По верху
    </div>
  </div>
  <div>
    <div>
      По центру
    </div>
    <div>
      По центру
    </div>
    <div>
      По центру
    </div>
  </div>
  <div>
    <div>
      По низу
    </div>
    <div>
      По низу
    </div>
    <div>
      По низу
    </div>
  </div>
</div>

Также можно выровнять колонки внутри одного ряда относительно друг друга, если колонки будут использовать классы align-self-start, align-self-center, align-self-end.

One of three columns

One of three columns

One of three columns

<div>
  <div>
    <div>
      One of three columns
    </div>
    <div>
      One of three columns
    </div>
    <div>
      One of three columns
    </div>
  </div>
</div>

Горизонтальное выравнивание

Создаём блоки, размер которых меньше 12 колонок. Дальше управляем их выравниванием из-за свободного места, указывая у ряда row классы justify-content-start, justify-content-center, justify-content-end. Также обратите внимание на классы justify-content-around, justify-content-between, которые окружают свободно место.

По левому краю

По левому краю

По центру

По центру

По правому краю

По правому краю

<div>
  <div>
    <div>
      По левому краю
    </div>
    <div>
      По левому краю
    </div>
  </div>
  
  <div>
    <div>
      По центру
    </div>
    <div>
      По центру
    </div>
  </div>
  
  <div>
    <div>
      По правому краю
    </div>
    <div>
      По правому краю
    </div>
  </div>
  
  <div>
    <div>
      Around
    </div>
    <div>
      Around
    </div>
  </div>
  
  <div>
    <div>
      Between
    </div>
    <div>
      Between
    </div>
  </div>
</div>

Промежутки

Используйте класс .no-gutters, чтобы убрать промежутки между блоками. Класс удаляет отрицательные margins из .row и горизонтальные padding из всех дочерних колонок.

.col-12 .col-sm-6 .col-md-8 no-gutters

.col-6 .col-md-4

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

Сортировка колонок

В обычной системе сеток, если нам необходимо поменять порядок колонок, нам нужно использовать push и pull.

Разработчики Bootstrap реализовали встроенное свойство flexbox order на основе трех классов сортировки, которые применим к колонкам col:

• .flex-first – отображается первым
• .flex-last – отображается последним
• .flex-unordered – отображается между первым и последним

Первый, но не первый и не последний

Второй, но последний

Третий, но первый

<div>
  <div>
    <div>
      Первый, но не первый и не последний
    </div>
    <div>
      Второй, но последний
    </div>
    <div>
      Третий, но первый
    </div>
  </div>
</div>

Смещение колонок

Для сдвига колонок вправо используйте .offset-md-*, которые увеличивают левый отступ на * колонок. Например, .offset-md-4 сдвигает на четыре колонки.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-3 .offset-md-3

<div>
  <div>
    <div>.col-md-4</div>
    <div>.col-md-4 .offset-md-4</div>
  </div>
  <div>
    <div>.col-md-3 .offset-md-3</div>
    <div>.col-md-3 .offset-md-3</div>
  </div>
  <div>
   <div>.col-md-6 .offset-md-3</div>
  </div>
</div>

Реклама

Вертикальный центр выравнивания в Bootstrap 4

Важный! Вертикальный центр относительно высоты родителя

Если родительский элемент элемента, который вы пытаетесь центрировать, не имеет определенной
высоты , ни одно из решений для вертикального центрирования не будет работать!

Теперь на вертикальное центрирование в Bootstrap 4 …

Вы можете использовать новые утилиты flexbox & size, чтобы сделать containerполноразмерным и display: flex. Эти параметры не требуют дополнительного CSS (за исключением того, что высота контейнера (т. Е. Html, body) должна составлять 100% ).

Вариант 1 align-self-centerна flexbox child

<div>
    <div>
     I'm vertically centered
    </div>
</div>

https://www.codeply.com/go/fFqaDe5Oey

Вариант 2 align-items-centerна flexbox родительский ( .rowесть display:flex; flex-direction:row)

<div>
    <div>
        <div>
            <div>
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/BumdFnmLuk

Вариант 3 justify-content-centerна flexbox родительский ( .cardесть display:flex;flex-direction:column)

<div>
    <div>
        <div>
            <div>
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>

https://www.codeply.com/go/3gySSEe7nd

Подробнее о Bootstrap 4 Вертикальное центрирование

Теперь, когда Bootstrap 4 предлагает flexbox и другие утилиты , существует множество подходов к вертикальному выравниванию. http://www.codeply.com/go/WG15ZWC4lf

1 — вертикальный центр с использованием авто полей:

Другой способ вертикального центрирования — использовать my-auto. Это будет центрировать элемент внутри его контейнера. Например, h-100делает строку полной высоты и my-autoбудет вертикально центрировать col-sm-12столбец.

<div>
    <div>
        <div>Card</div>
    </div>
</div>

Вертикальный центр с использованием Auto Margins Demo

my-auto представляет поля на вертикальной оси Y и эквивалентно:

margin-top: auto;
margin-bottom: auto;

2 — Вертикальный центр с Flexbox:

Поскольку Bootstrap 4 .rowтеперь display:flexдоступен, вы можете просто использовать align-self-centerлюбой столбец для его вертикального центрирования …

       <div>
           <div>
                <div>
                 Center
                </div>
           </div>
           <div>
                <div>
                    Taller
                </div>
          </div>
    </div>

или используйте align-items-centerвсе, .rowчтобы выровнять по центру все col-*строки подряд …

       <div>
           <div>
                <div>
                 Center
                </div>
           </div>
           <div>
                <div>
                    Taller
                </div>
          </div>
    </div>

Вертикальный центр Разная высота колонны Демонстрация

Посмотрите это Q / A по центру, но сохраняйте равную высоту

3 — Вертикальный центр с использованием утилит дисплея:

Бутстрап 4 имеет дисплей утилиты , которые могут быть использованы для display:table, display:table-cell, display:inlineи т.д .. Они могут быть использованы с вертикальными утилитами выравнивания для выравнивания инлайн, встроенный блок или элементы ячеек таблицы.

<div>
    <div>
        <div>
            I am centered vertically
        </div>
    </div>
</div>

Вертикальный центр Использование дисплея Utils Demo

Больше примеров
Вертикальное центральное изображение в <div>
вертикальном центре .row in .container
Вертикальный центр и дно в <div>
вертикальном центре дочернего элемента внутри родителя
Вертикальный центр полноэкранного jumbotron

Важный! Я упоминал высоту?

Помните, что вертикальное центрирование относительно высоты родительского элемента. Если вы хотите сосредоточиться на всей странице, в большинстве случаев это должен быть ваш CSS …

body,html {
  height: 100%;
}

Или используйте min-height: 100vh( min-vh-100в Bootstrap 4.1+) для родителя / контейнера. Если вы хотите центрировать дочерний элемент внутри родителя. Родитель должен иметь определенную высоту .

Также см .:
Вертикальное выравнивание в начальной загрузке 4
Начальная загрузка 4 Центральное вертикальное и горизонтальное выравнивание

html — Вертикальное выравнивание DIV и текста в Bootstrap 4

Я перебрал много вопросов здесь, а также много статей и документации по начальной загрузке 4, но не смог найти то, что искал.

ДЕМО: https://jsfiddle.net/zxLLqsm0/

Я хочу создать прямоугольники с одинаковой высотой для всех столбцов, а также выровнять текст по центру по вертикали. Мне удалось выровнять текст по вертикали, но высоты ящиков разные.

Вот мой HTML

<div>
  <div>
    <div>
      <div>
        <h6>Title 1</h6>
        <p>A small description</p>
      </div>
    </div>
    <div>
      <div>
        <h6>Title 2</h6>
        <p>A bigger description goes here</p>
      </div>
    </div>
    <div>
      <div>
        <h6>Title 3</h6>
        <p>A large description is placed here to make whatever changes we need.</p>
      </div>
    </div>
  </div>
</div>

И мой CSS:

.container {
  margin-top: 15px;
}
.box {
  background-color: grey;
  padding: 15px;
}

5

Elaine Byene

4 Апр 2018 в 20:23

4 ответа

Лучший ответ

В основном, на этот вопрос уже получен ответ.

Используйте flexbox и justify-content-center для центрирования box, а h-100 для height:100% …

<div>
  <div>
    <div>
      <div>
        <h6>Title 1</h6>
        <p>A small description</p>
      </div>
    </div>
    <div>
      <div>
        <h6>Title 2</h6>
        <p>A bigger description goes here</p>
      </div>
    </div>
    <div>
      <div>
        <h6>Title 3</h6>
        <p>A large description is placed here to make whatever changes we need.</p>
      </div>
    </div>
  </div>
</div>

https://www.codeply.com/go/VsyNMHZ8VG

Или , если вы хотите применить те же изменения к .box вместо использования классов Bootstrap …

https://jsfiddle.net/g38e9Lfm/

.box {
  background-color: grey;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

10

Zim
4 Апр 2018 в 19:48

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

 <div>
  <div>
    <div>
      <div>
        <div>
          <h6>Title 1</h6>
          <p>A small description</p>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>
          <h6>Title 2</h6>
          <p>A bigger description goes here</p>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>
          <h6>Title 3</h6>
          <p>A large description is placed here to make whatever changes we need.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Демо

3

Den Potapov
4 Апр 2018 в 18:38

Вот подход, надеюсь, он вам поможет.

.box{
  background-color: grey;
  padding: 15px;
  height: 200px; 
  display:table;
}

Сверните свою текстовую часть под новым div с class = «text», затем добавьте css

.text{
display:table-cell;
vertical-align:middle;
}

0

Ash
4 Апр 2018 в 17:51

Bootstrap 4 центрирование по вертикали и горизонтали

обновить 2018 — Bootstrap 4.0.0

здесь не нужно на дополнительный CSS. То, что уже включено в Bootstrap будет работать. Убедитесь, что контейнер(ы) формы полная высота. Bootstrap 4 теперь имеет h-100 класс для высоты 100%…

вертикальная центр:

<div>
  <div>
    <form>
      <div>
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" placeholder="Example input">
      </div>
      <div>
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" placeholder="Another input">
      </div>
    </form>   
  </div>
</div>

https://www.codeply.com/go/raCutAGHre

высота контейнера с элементом (- АМИ) к центру должна быть 100%

(или независимо от желаемой высоты относительно центрированного элемента)

Примечание: при использовании height:100% (процент высоты) на любой элемент, элемент принимает в высоту его контейнер. В современных браузерах ВХ блоки height:100vh; может использоваться вместо % чтобы получить нужную высоту.

горизонтального центра:

• text-center в центр display:inline элементы и содержания
• mx-auto для центрирования внутри гибкого элемента
• offset-* или mx-auto можно столбцы-центр (.col-)
• justify-content-center to столбцы-центр (col-*) внутри row

вертикальное выравнивание центра в Bootstrap 4
Bootstrap 4 полноэкранная центрированная форма
Bootstrap 4 центральная входная группа

bootstrap 4 выровнять по вертикали

На чтение 5 мин. Просмотров 82 Опубликовано 15.12.2019

У меня есть следующая настройка в Bootstrap 4: Ссылка на загрузку

Элемент с текстом «Поставщик» в нем должен быть вертикально центрирован, у меня разные строки с тем же кодом, и я хочу, чтобы они были центрированы. Никакое решение не работает для меня.

Может кто-то здесь найти то, что я сделал неправильно, и указать мне в правильном направлении?

Вы можете использовать класс flex-xs-middle , как это.

Bootstrap 4 Alpha 5

Бета-версия Bootstrap 4

ОБНОВЛЕНИЕ для Bootstrap 4

Теперь, когда Bootstrap 4 (Beta) по умолчанию flexbox, существует множество различных подходов к вертикальному выравниванию с использованием: auto-margins, flexbox utils, или display utils вместе с вертикальным выравниванием utils. Сначала «вертикальные выравнивающие утилиты» кажутся очевидными, но они работают только с встроенными и табличными элементами отображения. Вот несколько вариантов вертикального центрирования Bootstrap 4.

1 — Вертикальный центр с использованием автоматических полей:

Другим способом вертикального центра является использование my-auto . Это будет центрировать элемент внутри контейнера. Например, h-100 делает высоту строки, а my-auto будет вертикально центрировать столбец col-sm-12 .

my-auto представляет поля на вертикальной оси y и эквивалентен:

2 — Вертикальный центр с Flexbox:

Так как Bootstrap 4 .row теперь display:flex , вы можете просто использовать align-self-center для любого столбца, чтобы вертикально центрировать его.

или, используйте align-items-center для всего .row для вертикального выравнивания по центру col-* в строке.

3 — Вертикальный центр с использованием экранных приложений:

В Bootstrap 4 есть утилиты отображения, которые можно использовать для display:table , display:table-cell , display:inline и т.д. Это могут быть используется с настройками вертикального выравнивания для выравнивания встроенных, встроенных блоков или элементов ячейки таблицы.

пример

Приведение элементов в центр или нижнее выравнивание по вертикали всегда было проблемой с помощью CSS и Bootstrap. Желаемое выравнивание по вертикали может находиться внутри родительского контейнера или относительно смежных элементов.

Теперь, когда Bootstrap 4 является Flexbox по умолчанию существует множество различных подходов к вертикальной линии с использованием: Авто-поля , Flexbox Utilities , или Display Utilities вместе с вертикальным Совместите Utilities .

Сначала Утилиты вертикального выравнивания кажутся очевидным выбором, но они работают только с встроенными и табличными элементами отображения. Вот некоторые варианты и сценарии вертикального выравнивания Bootstrap 4 .

1 — Вертикальный центр с использованием автоматических полей:

Один из способов вертикального центра — использовать my-auto . Это будет центрировать элемент внутри контейнера. Например, h-100 делает высоту строки, а my-auto будет вертикально col-sm-12 столбец col-sm-12 .

my-auto представляет поля на вертикальной оси y и эквивалентен:

2 — Вертикальный центр с Flexbox:

Поскольку Bootstrap 4 .row теперь display:flex вы можете просто использовать align-self-center для любого столбца, чтобы вертикально align-self-center его .

или, используйте align-items-center на всем .row чтобы вертикально центрировать выровнять все col-* в строке .

3 — Вертикальный центр с использованием дисплеев:

В Bootstrap 4 есть утилиты отображения, которые могут использоваться для display:table , display:table-cell , display:inline и т. Д. Они могут использоваться с утилитами вертикального выравнивания для выравнивания встроенных, встроенных блоков или элементов ячейки таблицы.

При работе с bootstrap 3 я использую позиционирование сеткой (таблицей), об этом в начале статьи.

А в bootstrap 4 используется новый режим flexbox, но основные приёмы работы с сеткой остались с небольшими изменениями об этом в середине статьи.

Код скрина выше выглядит следующим образом:

DESIGN

REENGINEERING

SUPPORT

INSTRUMENTS

• Класс row задает расположение блоков в виде одной строки;
• Строка в bootstrap содержит максимум 12 столбцов;
• Класс col-ml-4 задает столбец строки, где
  • col(column) — столбец строки;
  • md — идентификатор устройства, bootstrap разделил все устройства на 4 группы в зависимости от ширины экрана;
  • 4 — количество условных единиц(столбцов) ширины будет занимать блок, из 12. То есть div с классом col-ml-4 займет 1/3 ширины экрана устройства шириной от 992 пикселей;

Типы классов устройств

1. col-xs-*: для устройств с шириной экрана меньше 768 пикселей;
2. col-sm-*: для устройств с шириной экрана от 768 пикселей и выше;
3. col-md-*: для устройств с шириной экрана от 992 пикселя и выше;
4. col-lg-*: для устройств с шириной экрана от 1200 пикселей и выше;

Как видно из примера выше я использовал сразу три класса одновременно для более детального отображения на различных устройствах

Так же как видно из кода я использовал разные значения столбцов для разных устройств — главное что бы в общем было 12 единиц. Мы можем задавать любую другую ширину для каждого устройства:

Классы col-md(sm|lg)-offset-* задают смещение относительно левого блока или начала строки в условных единицах

Левый блок / h3 >

Правый блок / h3 >

Класс col-md-offset-4 будет смещать правый блок на 4 условных единицы вправо:

Некоторые примеры по использованию смещения:

Порядок столбцов

С помощью классов col-md(sm|lg)-push-* и col-md(sm|lg)-pull-* мы можем переопределить порядок блоков в строке. Например, класс col-md-push-4 сдвигает блок на четыре единицы вправо от текущего положения. И наоборот, класс col-md-pull-4 сдвигает блок влево от текущей позиции. Так, предыдущий пример со смещением мы могли бы переписать таким способом:

Bootstrap Бутстрап 4 Flex

Bootstrap 4 Flex

Используйте классы Flex для управления компоновкой компонентов Bootstrap 4.

Flexbox

Самая большая разница между Bootstrap 3 и Bootstrap 4 заключается в том, что BootStrap 4 теперь использует Flexbox, а не float, для обработки макета.

Модуль компоновки гибких коробок упрощает разработку гибкой адаптивной структуры макета без использования float или позиционирования. Если вы новичок в Flex, вы можете прочитать об этом в нашем CSS Flexbox учебник.

Примечание: Flexbox не поддерживается в IE9 и более ранних версиях.

Если вам нужна поддержка IE8-9, используйте Bootstrap 3. Это наиболее стабильная версия Bootstrap, и она по-прежнему поддерживается командой для критических исправлений и изменений в документации. Тем не менее, новые функции не будут добавлены к нему.

Для создания контейнера Flexbox и преобразования прямых дочерних элементов в элементы Flex используйте d-flex класс:

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

<div>
 
<div>Flex item 1</div>
  <div>Flex
item 2</div>
  <div>Flex item 3</div>
</div>

Чтобы создать встроенный контейнер Flexbox, используйте d-inline-flex класс:

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

<div>
 
<div>Flex item 1</div>
  <div>Flex
item 2</div>
  <div>Flex item 3</div>
</div>

Горизонтальное направление

Используется .flex-row для отображения элементов Flex горизонтально (бок о бок). Это значение по умолчанию.

Совет: используйте .flex-row-reverse Выравнивание по горизонтали по правому краю:

Пример

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Пример

  Flex
item 1
  Flex item 2
 
Flex item 3

<div
class=»d-flex flex-row-reverse bg-secondary»>
  <div>Flex
item 1</div>
  <div>Flex item 2</div>
 
<div>Flex item 3</div>
</div>

Вертикальное направление

Используется .flex-column для отображения элементов Flex вертикально (поверх друг друга) или для изменения .flex-column-reverse вертикального направления:

Пример

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Пример

  Flex
item 1
  Flex item 2
 
Flex item 3

<div
class=»d-flex flex-column-reverse»>
  <div>Flex
item 1</div>
  <div>Flex item 2</div>
 
<div>Flex item 3</div>
</div>

Выравнивание содержимого

Используйте .justify-content-* классы для изменения выравнивания элементов Flex. Допустимые классы start (по умолчанию),,, end center between или around:

Пример

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Пример

<div>…</div>
<div>…</div>
<div>…</div>
<div>…</div>
<div>…</div>

Заливка/равная ширина

Используйте .flex-fill для элементов Flex, чтобы заставить их в равной ширины:

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

<div>
  <div>Flex
item 1</div>
  <div>Flex item 2</div>
 
<div>Flex item 3</div>
</div>

Grow

Используйте для .flex-grow-1 элемента Flex, чтобы занять оставшуюся часть пространства. В приведенном ниже примере первые два элемента Flex занимают необходимое пространство, в то время как последний элемент занимает оставшуюся часть доступного пространства:

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

<div>
  <div>Flex
item 1</div>
  <div>Flex item 2</div>
 
<div>Flex item 3</div>
</div>

Совет: Используйте .flex-shrink-1 на Flex элемент, чтобы сделать его сжатие, если это необходимо.

Order

Изменение визуального порядка конкретных элементов Flex с помощью .order классов. Допустимые классы от 0 до 12, где наименьшее число имеет наивысший приоритет (Order-1 отображается перед порядком-2 и т.д.):

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

<div>
  <div>Flex
item 1</div>
  <div>Flex item 2</div>
 
<div>Flex item 3</div>
</div>

Автоматические поля

С легкостью добавляйте автоматические поля в элементы Flex .mr-auto (нажимайте элементы вправо) или с помощью .ml-auto (передвиньте элементы влево):

Пример

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Пример

  Flex
item 1
  Flex item 2
 
Flex item 3

<div>
  <div
class=»p-2 bg-info»>Flex item 1</div>
  <div>Flex
item 2</div>
  <div>Flex item
3</div>
</div>

Обернуть

Управление переносом элементов Flex в контейнер Flex с помощью .flex-nowrap (по умолчанию) .flex-wrap или .flex-wrap-reverse.

Нажмите на кнопки ниже, чтобы увидеть разницу между тремя классами, по Чанг в упаковке Flex элементов в примере поле:

flex-wrap
flex-wrap-reverse
flex-nowrap

Пример

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

Flex item 16

Flex item 17

Flex item 18

Flex item 19

Flex item 20

Flex item 21

Flex item 22

Flex item 23

Flex item 24

Flex item 25

Пример

..

<div>..</div>

<div>..</div>

Выравнивание содержимого

Управление вертикальным выравниванием собранных элементов Flex с помощью .align-content-* классов. Допустимые классы .align-content-start (по умолчанию),,,, .align-content-end .align-content-center .align-content-between .align-content-around и .align-content-stretch .

Примечание: Эти классы не влияют на отдельные строки элементов Flex.

Нажмите на кнопки ниже, чтобы увидеть разницу между пятью классами, изменив вертикальное выравнивание элементов Flex в поле пример:

align-content-start
align-content-end
align-content-center
align-content-around
align-content-stretch

Example

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Flex item 11

Flex item 12

Flex item 13

Flex item 14

Flex item 15

Flex item 16

Flex item 17

Flex item 18

Flex item 19

Flex item 20

Flex item 21

Flex item 22

Flex item 23

Flex item 24

Flex item 25

Пример

..

<div>..</div>

<div>..</div>

<div>..</div>

<div>..</div>

Выравнивание элементов

Управление вертикальным выравниванием отдельных строк элементов Flex с помощью .align-items-* классов. Допустимые классы .align-items-start:, .align-items-end, .align-items-center .align-items-baseline и .align-items-stretch (по умолчанию).

Нажмите на кнопки ниже, чтобы увидеть разницу между пятью классами:

align-items-start
align-items-end
align-items-center
align-items-baseline
align-items-stretch

Пример

Flex item 1

Flex item 2

Flex item 3

Пример

..

<div>..</div>

<div>..</div>

<div>..</div>

<div>..</div>

Выравнивание себя

Управление вертикальным выравниванием заданного элемента Flex с классами .align-self-*. Допустимые классы .align-self-start:, .align-self-end, .align-self-center .align-self-baseline и .align-self-stretch (по умолчанию).

Нажмите на кнопки ниже, чтобы увидеть разницу между пятью классами:

align-self-start
align-self-end
align-self-center
align-self-baseline
align-self-stretch

Example

Flex item 1

Flex item 2

Flex item 3

Пример

<div>
  <div
class=»p-2 border»>Flex item 1</div>
  <div>Flex item 2</div>
  <div
class=»p-2 border»>Flex item 3</div>
</div>

Адаптивные классы Flex

Все классы Flex оснащены дополнительными адаптивными классами, что упрощает задание определенного класса Flex для определенного размера экрана.

*символ может быть заменен SM, MD, LG или XL, который представляет малые, средние, большие или XLarge экраны.

css — Центр вертикального выравнивания в Bootstrap

Важно! Вертикальный центр относительно высоты родительского

Если родительский элемент, который вы пытаетесь центрировать, не определен
высота , нет решений для вертикального центрирования будут работать!

Теперь перейдем к центрированию по вертикали …

Bootstrap 5 (обновлено в 2021 г.)

Bootstrap 5 по-прежнему основан на flexbox , поэтому вертикальное центрирование работает так же, как Bootstrap 4.Например, align-items-center , justify-content-center или auto margins можно использовать в родительском элементе flexbox ( row или d-flex ).

• использовать align-items-center в родительской строке flexbox ( row или d-flex )
• использовать justify-content-center в родительском столбце flexbox ( d-flex flex-column )
• используйте my-auto на родительском элементе flexbox

Вертикальный центр в Bootstrap 5

Бутстрап 4

Вы можете использовать новые утилиты flexbox & size, чтобы сделать контейнер полноразмерным и отображать : flex .Эти параметры не требуют дополнительного CSS (за исключением того, что высота контейнера (т.е. html, body) должна быть 100% ).

Вариант 1 самоцентрирующееся выравнивание на дочернем элементе flexbox

  

    

     Я вертикально по центру
    

  

https://codeply.com/go/fFqaDe5Oey

Вариант 2 align-items-center на родительском элементе flexbox ( .row — это display: flex; flex-direction: row )

  

    

        

            

                Я вертикально по центру
            
        
    

  

https: // codeply.com / go / BumdFnmLuk

Вариант 3 justify-content-center на родительском элементе flexbox ( .card — это display: flex; flex-direction: column )

  

    

        

            

                

                    ... содержимое карты ...
                
            
        
    

  

https://codeply.com/go/3gySSEe7nd

Подробнее о Bootstrap 4 Вертикальное центрирование

Теперь, когда Bootstrap 4 предлагает flexbox и другие утилиты, существует множество подходов к вертикальной
выравнивание.http://www.codeply.com/go/WG15ZWC4lf

1 — Вертикальный центр с автоматическими полями:

Другой способ вертикального центрирования — использовать my-auto . Это центрирует элемент внутри контейнера. Например, h-100 делает строку полной высотой, а my-auto будет вертикально центрировать столбец col-sm-12 .

  

    

        
 Карточка 
    

  

Вертикальный центр с автоматическими полями Демо

my-auto представляет поля по вертикальной оси Y и эквивалентно:

  верхнее поле: авто;
маржа снизу: авто;
  

2 — Вертикальный центр с Flexbox:

Начиная с Bootstrap 4 .строка теперь отображается : flex вы можете просто использовать align-self-center в любом столбце, чтобы центрировать его по вертикали …

  

           

                

                 Центр
                
           
           

                

                    Выше
                
          
    
  

или используйте align-items-center на всем .ряд по центру вертикально выровнять все столбцы * в ряду …

  

           

                

                 Центр
                
           
           

                

                    Выше
                
          
    
  

Колонны разной высоты с вертикальным центром Демонстрация

См. Этот вопрос / ответ, чтобы отцентрировать, но сохранить одинаковую высоту

3 — Вертикальный центр с использованием средств отображения:

Bootstrap 4 имеет утилиты отображения, которые можно использовать для отображения : таблица , отображение : таблица-ячейка , отображение : встроенный и т. Д.. Их можно использовать с утилитами вертикального выравнивания для выравнивания элементов ячеек inline, inline-block или table.

  

    

        

            Я по центру вертикально
        
    

  

Вертикальный центр с использованием Display Utils Demo

Другие примеры
Изображение по центру по вертикали в

  body, html {
  высота: 100%;
}
  

  .vertical-center {
  минимальная высота: 100%; / * Резервный вариант для браузеров НЕ поддерживает модуль vh * /
  мин-высота: 100vh; / * Эти две строки считаются как одна :-) * /

  дисплей: гибкий;
  align-items: center;
}
  

  

  

    ...
  

  

  .vertical-center {
  высота: 100%;
  ширина: 100%;

  выравнивание текста: центр; / * выравниваем строчные (-block) элементы по горизонтали * /
  шрифт: 0/0 а; / * убираем пробел между встроенными (-block) элементами * /
}

.vertical-center: before {/ * создать встроенный блок во всю высоту pseudo = element * /
  содержание: " ";
  дисплей: встроенный блок;
  вертикальное выравнивание: по центру; / * вертикальное выравнивание встроенного элемента * /
  высота: 100%;
}

.vertical-center> .container {
  максимальная ширина: 100%;

  дисплей: встроенный блок;
  вертикальное выравнивание: по центру; / * вертикальное выравнивание встроенного элемента * /
                           / * сбросить свойство шрифта * /
  шрифт: 16px / 1 «Helvetica Neue», Helvetica, Arial, без засечек;
}
  

  @media (max-width: 768 пикселей) {
  .vertical-center: before {
    высота: авто;
    /* Или */
    дисплей: нет;
  }
}
  

  

    

        

            
 
        
        

            
 Поставщик 
        
    
    

        

            
 
        
         

            
 Поставщик 
        
    

  

  

    

        
 Карточка 
    

  

  верхнее поле: авто;
маржа снизу: авто;
  

  

           

                

                 Центр
                
           
           

                

                    Выше
                
          
    
  

  

           

                

                 Центр
                
           
           

                

                    Выше
                
          
    
  

  

    

        

            Я по центру вертикально
        
    

  

  

  

    <форма>
      

         Пример метки 
        
      
      

         Другой ярлык 
        
      
    
  

  

 
    Легенда:

    '->' означает 'требуется'

    Все бесплатные и профессиональные файлы требуют файлов из каталога 'core'

    'none' означает 'этот компонент не требует ничего, кроме файлов ядра'

    Файл, заключенный в ``, означает, что этот файл делает базовый компонент красивее, но это не обязательно для правильной работы.

    Все компоненты PRO требуют 'pro / _variables.scss 'файл

    scss /
    |
    | - ядро ​​/
    | |
    | | - бутстрап /
    | | | - _functions.scss
    | | | - _variables.scss
    | |
    | | - _colors.scss
    | | - _global.scss
    | | - _helpers.scss
    | | - _masks.scss
    | | - _mixins.scss
    | | - _typography.scss
    | | - _variables.scss
    | | - _waves.scss
    |
    | - бесплатно /
    | | - _animations-basic.scss -> нет
    | | - _animations-extended.scss -> _animations-basic.scss
    | | - _buttons.scss -> нет
    | | - _cards.scss -> нет
    | | - _dropdowns.scss -> нет
    | | - _input-group.scss -> _forms.scss, _buttons.scss, _dropdowns.scss
    | | - _navbars.scss -> нет
    | | - _pagination.scss -> нет
    | | - _badges.scss -> нет
    | | - _modals.scss -> _buttons.scss, _forms.scss (PRO -> _tabs.scss)
    | | - _carousels.scss ->
    | | - _forms.scss -> нет
    | | - _msc.scss -> нет
    | | - _footers.scss нет (PRO :)
    | | - _list-group.scss -> нет
    | | - _tables.scss -> нет (PRO: _material-select.scss, pro / _forms.scss, _checkbox.scss, pro / _buttons.scss, pro / _cards.scss, _pagination.scss, pro / _msc.scss )
    | | - _depreciated.scss
    |
    | - pro /
    | |
    | | - сборщик /
    | | | - _default.scss -> нет
    | | | - _default-time.scss -> _default.scss, free / _forms.scss, free / _buttons.scss, pro / _buttons.scss, free / _cards.scss
    | | | - _default-date.scss -> _default.scss, бесплатно / _forms.scss
    | |
    | | - разделы /
    | | | - _templates.scss -> _sidenav.scss
    | | | - _social.scss -> бесплатно / _cards.scss, бесплатно / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss,
    | | | - _team.scss -> бесплатно / _buttons.scss, pro / _buttons.scss, free / _cards.scss, pro / _cards.scss
    | | | - _testimonials.scss -> бесплатно / _carousels.scss, pro / _carousels.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _magazine.scss -> _badges.scss
    | | | - _pricing.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | | - _contacts.scss -> бесплатно / _forms.scss, pro / _forms.scss, бесплатно / _buttons.scss, pro / _buttons.scss
    | |
    | | - _variables.scss
    | | - _buttons.scss -> бесплатно / _buttons.scss, pro / _msc.scss, _checkbox.scss, _radio.scss
    | | - _social-buttons.scss -> бесплатно / _buttons.scss, pro / _buttons.scss
    | | - _tabs.scss -> _cards.scss
    | | - _cards.scss -> бесплатно / _cards.scss
    | | - _dropdowns.scss -> бесплатно / _dropdowns.scss, бесплатно / _buttons.scss
    | | - _navbars.scss -> бесплатно / _navbars.scss (PRO :)
    | | - _scrollspy.scss -> нет
    | | - _lightbox.scss -> нет
    | | - _chips.scss -> нет
    | | - _msc.scss -> нет
    | | - _forms.scss -> нет
    | | - _radio.scss -> нет
    | | - _checkbox.scss -> нет
    | | - _material-select.scss -> нет
    | | - _switch.scss -> нет
    | | - _file-input.scss -> бесплатно / _forms.scss, бесплатно / _buttons.scss
    | | - _range.scss -> нет
    | | - _input-group.scss -> free / _input-group.scss и то же, что и свободная группа ввода, _checkbox.scss, _radio.scss
    | | - _autocomplete.scss -> бесплатно / _forms.scss
    | | - _accordion.scss -> pro / _animations.scss, бесплатно / _cards.scss
    | | - _parallax.scss -> нет
    | | - _sidenav.scss -> бесплатно / _forms.scss, pro / _animations.scss, разделы / _templates.scss
    | | - _ecommerce.scss -> бесплатно / _cards.scss, pro / _cards.scss, бесплатно / _buttons.scss, pro / _buttons.scss, pro / _msc.scss
    | | - _carousels.scss -> бесплатно / _carousels.scss, бесплатно / _cards.scss, бесплатно / _buttons.scss
    | | - _steppers.scss -> бесплатно / _buttons.scss
    | | - _blog.scss -> нет
    | | - _toasts.scss -> бесплатно / _buttons.scss
    | | - _animations.scss -> нет
    | | - _charts.scss -> нет
    | | - _progress.scss -> нет
    | | - _scrollbar.scss -> нет
    | | - _skins.scss -> нет
    | | - _устарело.scss
    |
    `- _custom-skin.scss
    `- _custom-styles.scss
    `- _custom-variables.scss
    `- mdb.scss

    

 
    Легенда:

    '->' означает 'требуется'

    Все файлы требуют jQuery и bootstrap.js

    js /
    ├── dist /
    │ ├── buttons.js
    │ ├── cards.js
    │ ├── character-counter.js
    │ ├── chip.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── раскрывающийся список.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    ├── _intro-mdb-pro.js
    ├── modules.js
    ├── src /
    │ ├── buttons.js
    │ ├── карты.js
    │ ├── character-counter.js
    │ ├── chip.js
    │ ├── collapsible.js -> vendor / velocity.js
    │ ├── dropdown.js -> Popper.js, jquery.easing.js
    │ ├── file-input.js
    │ ├── forms-free.js
    │ ├── material-select.js -> dropdown.js
    │ ├── mdb-autocomplete.js
    │ ├── preloading.js
    │ ├── range-input.js -> vendor / velocity.js
    │ ├── scrolling-navbar.js
    │ ├── sidenav.js -> vendor / velocity.js, vendor / hammer.js, vendor / jquery.hammer.js
    │ └── smooth-scroll.js
    └── продавец /
        ├── аддоны /
        │ ├── datatables.js
        │ └── datatables.min.js
        ├── chart.js
        ├── extended-modals.js
        ├── hammer.js
        ├── jarallax.js
        ├── jarallax-video.js -> vendor / jarallax.js
        ├── jquery.easing.js
        ├── jquery.easypiechart.js
        ├── jquery.hammer.js -> vendor / hammer.js
        ├── jquery.sticky.js
        ├── lightbox.js
        ├── picker-date.js -> vendor / picker.js
        ├── picker.js
        ├── picker-time.js -> vendor / picker.js
        ├── scrollbar.js
        ├── scrolling-navbar.js
        ├── toastr.js
        ├── velocity.js
        ├── waves.js
        └── wow.js
    

  <тело>

    

    

        Это должно быть отцентрировано по вертикали.
    
    
 
 

  

    

    

        Это должно быть отцентрировано по вертикали.
    
    


  

  margin-top: auto;
маржа снизу: авто;
  

  

    

    

        Это должно быть отцентрировано по вертикали.