Bootstrap 4 по центру: Выравнивание по центру страницы, правильно-ли (Bootstrap 4)? — Хабр Q&A

Разное
17 Апр, 1978
0

Содержание

Как разместить блок по центру в Bootstrap 4

Создание мультиплеерной игры на Unreal Engine 4

В этом курсе Вы увидите пример создания мультиплеерной игры на Unreal Engine 4: создание персонажа, HUD, атака, блокировка, главное меню и многое другое.

Чтобы получить Видеокурс,
заполните форму

E-mail:
Имя:

Другие курсы

Как создать профессиональный Интернет-магазин

После семинара:

— Вы будете знать, как создать Интернет-магазин.

— Вы получите бесплатный подарок с подробным описанием каждого шага.

— Вы сможете уже приступить к созданию Интернет-магазина.

Записаться

Другие курсы

Если не можешь изменить обстоятельства, попробуй изменить свое отношение к ним.

Джордж Бернард Шоу

Доброго времени суток всем! В данной статье я хочу рассказать Вам как можно поместить в центре страницы какой-либо блок. Причем блок будет выровнен как горизонтально так и вертикально. Делать мы будет это на Bootstrap 4, поэтому для тех, кто только начинает изучать этот фреймворк далеко не очевидно — как можно отцентрировать некий блок Bootstrap 4.

Пример будет самый что ни есть практический — форма входа на сайт.

Итак, для начала немного теории: Bootstrap 4 во всю использует технологию Flexbox CSS, которая позволяет очень просто делать многие вещи, которые ранее в

CSS требовали больших трудозатрат, например, центрировать блоки. Во фреймворке Bootstrap 4 для этого есть необходимые утилитарные классы, такие как .d-flex, .justify-content-center, .align-items-center.

Используя класс .d-flex — можно превратить блок в flex-блок, а его дочерние элементы в flex-элементы. После этого, к последним можно применять множество самых разнообразных классов, кастомизируя их отображение на странице. Например, их можно отцентрировать горизонтально с помощью класса

.justify-content-center, который применяется к родительскому flex-блок. Вертикальное центрирование тоже не составляет труда, но здесь кроется небольшая хитрость. Если Вы примените класс .align-items-center к родительскому элементу, для того чтобы все его дочерние элементы выровнялись еще и вертикально — ничего не произойдет. А все потому, что высота тегов html, body и .container должна быть равна 100%. Для того, чтобы сделать высоту контейнера в Bootstrap равной 100% нужно использовать класс .h-100. Далее я приведу непосредственно код:



<!doctype html>

<html lang="en">

  <head>
 
    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://cdn. jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <title>Hello, world!</title>
    <style>
        html, body {

            height: 100%;
 
        }
        body {

            background-color: azure;

        }
    </style>
  </head>

  <body>

    

    
    <div class="container-fluid d-flex h-100 justify-content-center align-items-center p-0">
        <div class="row bg-white shadow-sm">
           <div class="col border rounded p-4">

            <h4 class="text-center mb-4">Вход</h4>

            <form>

                <div class="form-group">

                  <label for="exampleInputEmail1">Email</label>

                  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
 
                </div>

                <div class="form-group">

                  <label for="exampleInputPassword1">Пароль</label>

                  <input type="password" class="form-control" id="exampleInputPassword1">

                </div>

                <div class="form-group form-check">

                  <input type="checkbox" class="form-check-input" id="exampleCheck1">

                  <label class="form-check-label" for="exampleCheck1">Запомнить</label>

                </div>

                <button type="submit" class="btn btn-primary w-100">Войти</button>
 
              </form>

           </div>

        </div>

    </div>
    <!-- Optional JavaScript; choose one of the two! -->
    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->

    <script src="https://code. jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
 
  </body>

</html>

И вот таким образом мы поместили блок по центру страницы.

Создано 20.10.2020 13:59:15
Михаил Русаков

Предыдущая статьяСледующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья

ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.

com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>
Она выглядит вот так:
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>
Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

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

5 колонок

4 колонки

Используя классы 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

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

1 of 3

Два слова

3 of 3

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

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

col

col-8

col-4

<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-*, вы можете создать базовую сеточную систему, которая разместит блоки в виде стопки на телефонах, а затем будет выводить блоки в один ряд.

col-sm-8

col-sm-4

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

<!-- 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

<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, которые окружают свободно место.

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

По центру

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

Around

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-6 .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 v5.0

Внимание! Обязательно прочтите страницу Сетка, прежде чем погрузиться в то, как изменять и настраивать колонки сетки.

Как они работают

Колонки основаны на архитектуре Flexbox сетки. Flexbox означает, что у нас есть возможности для изменения отдельных колонок и модификации групп колонок на уровне строки. Вы выбираете, как колонки увеличиваются, уменьшаются или изменяются иным образом.
При построении макетов сетки весь контент размещается в колонках. Иерархия сетки Bootstrap идет от контейнера до строки к колонки Вашего содержимого. В редких случаях Вы можете комбинировать контент и колонку, но имейте в виду, что это может иметь непредвиденные последствия.
Bootstrap включает предопределенные классы для создания быстрых и отзывчивых макетов. Благодаря шести контрольным точкам и дюжине колонок на каждом уровне сетки у нас есть десятки классов уже построен для Вас, чтобы создавать желаемые макеты. При желании это можно отключить через Sass.

Выравнивание

Используйте утилиты выравнивания flexbox для вертикального и горизонтального выравнивания колонок.

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

Одна из трех колонок

<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>

Одна из трех колонок

<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>
    <div>
      Одна из двух колонок
    </div>
  </div>
  <div>
    <div>
      Одна из двух колонок
    </div>
    <div>
      Одна из двух колонок
    </div>
  </div>
  <div>
    <div>
      Одна из двух колонок
    </div>
    <div>
      Одна из двух колонок
    </div>
  </div>
  <div>
    <div>
      Одна из двух колонок
    </div>
    <div>
      Одна из двух колонок
    </div>
  </div>
</div>

Обертывание колонок

Если в одной строке помещается более 12 колонок, каждая группа дополнительных колонок, как одно целое, переносится на новую строку.

.col-9

.col-4
Поскольку 9 + 4 = 13 > 12, этот div шириной в 4 колонки переносится на новую строку как один непрерывный блок.

.col-6
Последующие колонки продолжаются вдоль новой строки.

<div>
  <div>
    <div>.col-9</div>
    <div>.col-4<br>Поскольку 9 + 4 = 13 &gt; 12, этот div шириной в 4 колонки переносится на новую строку как один непрерывный блок.</div>
    <div>.col-6<br>Последующие колонки продолжаются вдоль новой строки.</div>
  </div>
</div>

Разрывы колонок

Разбиение колонок на новую строку в flexbox требует небольшого хака: добавьте элемент с width: 100% везде, где Вы хотите перенести колонки на новую строку. Обычно это достигается с помощью нескольких .row, но не каждый метод реализации может это учитывать.

.col-6 .col-sm-3

<div>
  <div>
    <div>. col-6 .col-sm-3</div>
    <div>.col-6 .col-sm-3</div>
    <!-- Заставит следующие колонки переходить на новую строку -->
    <div></div>
    <div>.col-6 .col-sm-3</div>
    <div>.col-6 .col-sm-3</div>
  </div>
</div>

Вы также можете применить этот разрыв в определенных контрольных точках с помощью наших утилит для адаптивного отображения.

.col-6 .col-sm-4

<div>
  <div>
    <div>.col-6 .col-sm-4</div>
    <div>.col-6 .col-sm-4</div>
    <!-- Заставит следующие колонки переходить на новую строку в контрольной точке md и выше -->
    <div></div>
    <div>.col-6 .col-sm-4</div>
    <div>.col-6 .col-sm-4</div>
  </div>
</div>

Изменение порядка

Класса порядка

Используйте классы .order- для управления визуальным порядком Вашего контента. Эти классы отзывчивы, поэтому Вы можете установить order по контрольной точке (например, .order-1.order-md-2). Включает поддержку от 1 до 5 на всех шести уровнях сетки.

Первый в DOM, порядок не применяется

Второй в DOM, с наибольшим порядком

Третий в DOM, с 1 порядком

<div>
  <div>
    <div>
      Первый в DOM, порядок не применяется
    </div>
    <div>
      Второй в DOM, с наибольшим порядком
    </div>
    <div>
      Третий в DOM, с 1 порядком
    </div>
  </div>
</div>

Существуют также адаптивные классы .order-first и .order-last, которые изменяют order элемента, применяя order: -1 и order: 6 соответственно. Эти классы также могут быть при необходимости смешаны с пронумерованными классами .order-*.

Первый в DOM, порядок последнего

Второй в DOM, без порядка

Третий в DOM, порядок первого

<div>
  <div>
    <div>
      Первый в DOM, порядок последнего
    </div>
    <div>
      Второй в DOM, без порядка
    </div>
    <div>
      Третий в DOM, порядок первого
    </div>
  </div>
</div>

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

Вы можете смещать колонки сетки двумя способами: нашими адаптивными классами сетки . offset- и нашими утилитами полей. Классы сетки имеют размер, соответствующий колонкам, в то время как поля более полезны для быстрых макетов, где ширина смещения является переменной.

Классы смещения

Переместите колонки вправо, используя классы .offset-md-*. Эти классы увеличивают левое поле колонки на колонки *. Например, .offset-md-4 перемещает .col-md-4 на четыре колонки.

.col-md-4

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

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

.col-md-6 .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>

В дополнение к очистке колонки в адаптивных контрольных точках Вам может потребоваться сбросить смещения. См. это в действии в пример сетки.

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div>
  <div>
    <div>.col-sm-5 .col-md-6</div>
    <div>.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div>
    <div>.col-sm-6 .col-md-5 .col-lg-6</div>
    <div>.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Утилиты полей

С переходом на flexbox в v4 Вы можете использовать утилиты полей, такие как .me-auto, чтобы отодвинуть одноуровневые столбцы друг от друга.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

<div>
  <div>
    <div>.col-md-4</div>
    <div>. col-md-4 .ms-auto</div>
  </div>
  <div>
    <div>.col-md-3 .ms-md-auto</div>
    <div>.col-md-3 .ms-md-auto</div>
  </div>
  <div>
    <div>.col-auto .me-auto</div>
    <div>.col-auto</div>
  </div>
</div>

Автономные классы колонок

Классы .col-* также могут использоваться вне .row, чтобы дать элементу определенную ширину. Когда классы колонок используются как непрямые дочерние элементы строки, отступы опускаются.

.col-3: ширина равна 25%

.col-sm-9: ширина равна 75% выше контрольной точки sm

<div>
  .col-3: ширина равна 25%
</div>
<div>
  .col-sm-9: ширина равна 75% выше контрольной точки sm
</div>

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

PlaceholderАдаптивное плавающее изображение

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

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

И тем не менее, здесь вы, по-прежнему настойчив в чтении этот текст-заполнитель, в надежде еще несколько прозрений, или некоторые скрытые пасхальные яйца содержания. Возможно, шутка. К сожалению, здесь ничего этого нет.

<div>
<img src="..." alt="...">
<p>
Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса clearfix. Мы добавляем здесь довольно много бессмысленных фраз, чтобы продемонстрировать, как столбцы здесь взаимодействуют с плавающим изображением.
</p>
<p>
Как видите, абзацы изящно обтекают плавающее изображение. А теперь представьте, как это будет выглядеть с фактическим содержанием здесь, а не просто с этим скучным текстом-заполнителем, который продолжается и продолжается, но на самом деле не передает никакой осязаемой информации. Он просто занимает место, и его не стоит читать.
</p>
<p>
И тем не менее, здесь вы, по-прежнему настойчив в чтении этот текст-заполнитель, в надежде еще несколько прозрений, или некоторые скрытые пасхальные яйца содержания. Возможно, шутка. К сожалению, здесь ничего этого нет.
</p>
</div>

8 примеров выравнивания текста в Bootstrap 4: по центру, справа и т. д.

Bootstrap 4 имеет встроенные классы для работы с выравниванием текста по центру, по правому и левому краю, а также с жирностью текста (полужирным), обтеканием, переполнением, преобразованием и курсивом.

В этом уроке я покажу вам живые демонстрации выравнивания текста по центру, справа и слева. Я также покажу вам, как использовать вспомогательные классы float вместе с классами выравнивания текста для изображений.

Пример текста в центре Bootstrap

Чтобы выровнять текст по центру, используйте класс .text-center . В следующем примере этот класс применяется к абзацу и заголовкам от h2 до h6 для выравнивания текста по центру:

Посмотреть онлайн-демонстрацию и код

Наценка:

Класс text-center для выравнивания текста по центру абзаца!

Центрировать текст в заголовке 1!

Центрировать текст в заголовке 2 !

Отцентрируйте текст в заголовке 3!

Отцентрируйте текст в заголовке 4!

Отцентрируйте текст в заголовке 5!

Отцентрируйте текст в заголовке 6!

Пример выравнивания текста по правому краю

Для выравнивания текста по правому краю используйте класс . text-right в элементе. Как и в приведенном выше примере, я применил класс .text-right к абзацу и заголовкам от h2 до h6 для демонстрации:

Посмотреть онлайн-демонстрацию и код

Код для выравнивания справа пример

11 0003

Выровнять по правому краю по классу text-right в абзаце

Выровнять по правому краю в h2!

Выровнять по правому краю h3!

Выровнять по правому краю h2!

03

Выровнять по правому краю h2!

Пример использования класса text-left

Точно так же вы можете использовать класс . text-left для выравнивания текста по левому краю. Это поведение по умолчанию, применяемое в тексте. Чтобы показать разницу, я использовал абзацы и заголовки с классом .text-left и без него.

Посмотрите вывод и код, посетив демонстрационную страницу:

См. онлайн-демонстрацию и код

Разметка для использования класса text-left:

11 0003

Выровнять по левому краю по классу text-left в абзаце

Выровнять h2 по левому краю!

Выровнять h3 по левому краю!

Выровнять h2 по левому краю!

0

Выровнять h2 по левому краю!

Выравнивание текста с окнами просмотра

Если вы хотите сохранить выравнивание текста по центру или правому краю для больших или маленьких устройств, особенно в соответствии с окнами просмотра, используйте свойство text-align, как описано ниже с примерами.

Для выравнивания текста по центру только на больших устройствах используйте класс text-lg-center . Чтобы проверить это, скопируйте код со страницы примера в свой редактор и запустите код. Теперь посмотрите на размер экрана >=1200px и в маленьком размере, чтобы увидеть, как он меняет свое выравнивание:

См. онлайн-демонстрацию и код

Код:

110003

9000 15

Демонстрация выравнивания текста в Bootstrap 4

Выравнивание по центру в большом окне просмотра и по левому краю в малых окнах просмотра

h2: по центру на большом экране и по левому краю в среднем/меньшем

h5: по центру большого экрана и по центру среднего/меньшего

h6: по центру на большом экране и по центру среднего/меньшего размера

Выравнивание по центру только в средних и больших окнах просмотра

Для выравнивания текста по центру только в средних и больших окнах просмотра с выравниванием по левому краю в малых окнах просмотра используйте класс . text-md-center в таких элементах, как < р>,

,

и т. д.

Посмотрите на использование и попробуйте с различными размерами экрана:

Посмотреть онлайн-демонстрацию и код

Код:

110003

9000 15

Демонстрация класса text-md-center

Выравнивание по центру в средних/больших окнах просмотра и по левому краю в малых окнах просмотра

h2: по центру на среднем/большом экране и слева на меньшем

h5: по центру на среднем/большом экране и по центру на меньшем

h5: по центру среднего/большого экрана и по центру меньшего

h6: по центру среднего/большого экрана и по центру меньшего

Демонстрация класса text-sm-center

Для выравнивания текста по центру на всех устройствах/окнах просмотра, кроме очень маленьких (менее 576 пикселей), используйте класс text-sm-center . Демонстрационный код показан ниже:

См. онлайн-демонстрацию и код

Попробуйте код:

Демонстрация класса text-sm-center

Выравнивание по центру в малых/средних/больших окнах просмотра, кроме очень маленьких

3 h2: по центру маленький/средний/большой, кроме очень маленького

h5: по центру маленький/средний/большой, кроме очень маленького

h6: по центру маленький/средний/большой, кроме очень маленького

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

Точно так же Bootstrap 4 имеет встроенные классы для выравнивания по правому или левому краю (специально) для различных экранов/окна просмотра. Доступны следующие классы:

Для выравнивания вправо:

текст-см-право
текст-md-право
текст-lg-справа

Для выравнивания по левому краю:

текст-см-левый
текст-мд-левый
текст-lg-слева

Централизованное выравнивание изображения с помощью класса text-center

Вы можете использовать не только .text-center или другие текстовые классы для выравнивания текстов, но и изображений. В следующем примере два изображения выравниваются по правому краю и по центру с помощью классов выравнивания текста Bootstrap 4 следующим образом:

Посмотреть онлайн-демонстрацию и код

Разметка для изображений с выравниванием по правому краю и по центру с помощью текстовых классов:

png» alt=»Изображение с выравниванием по центру»>

Выравнивание изображений с плавающими классами

Вы также можете использовать вспомогательные плавающие классы для выравнивания изображений по левому или правому краю. В приведенном ниже примере используются следующие классы float:

плавающий левый
плавающий правый 905:30

См. онлайн-демонстрацию и код

Пример кода:

Пример выравнивания изображений

png» alt=»Выровнено по правому краю»>

Посмотрите вывод и получите полный код с демонстрационной страницы.

Текст

Эта высота div необходима для включения закрепленной боковой панели

Bootstrap 4 Flex

❮ Предыдущая Далее ❯

Bootstrap 4 Flex

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

Flexbox

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

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

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

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

Чтобы создать контейнер flexbox и преобразовать прямые дочерние элементы в flex-элементы, используйте класс d-flex :

Example

Flex item 1

Flex item 2

Flex item 3

Example

>

Элемент гибкости 1

Гибкий item 2

Flex item 3

Попробуйте сами »

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

Пример

Flex-элемент 1

Flex-элемент 2

Flex-элемент 3

Пример

Элемент Flex 1

Flex элемент 2

Элемент гибкости 3

Попробуйте сами »

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

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

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

Пример

Flex-элемент 1

Flex-элемент 2

Flex-элемент 3

Flex-элемент 1

Flex-элемент 2

Flex-элемент 3

Пример

Гибкий элемент 1

элемент Flex 2

Элемент Flex 3

Гибкий элемент 1

элемент Flex 2

Flex item 3

Попробуйте сами »

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

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

Пример

Гибкий элемент 1

Гибкий элемент 2

Гибкий элемент 3

Гибкий элемент 1

Гибкий элемент 2

Гибкий элемент 3 Пример

6

Гибкий элемент 1

элемент Flex 2

Элемент Flex 3

<дел >

Гибкий элемент 1

элемент Flex 2

Flex item 3

Попробуйте сами »

Justify Content

Используйте классы . justify-content-* для изменения выравнивания flex-элементов. Допустимые классы: начало (по умолчанию), конец , центр , между или Около :

Пример

Электростанции 1

Электростанция 2

Электромерное изделия 3

Элемент сгибания 1

Элемент 2

Элемент 3

. item 3

Flex item 1

Flex item 2

Flex item 3

Flex item 1

Flex item 2

Flex item 3

Example

>…

…

Попробуйте сами »

Заполнение / Равная ширина

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

Example

Flex item 1

Flex item 2

Flex item 3

Example

элемент 1

Элемент гибкости 2

Flex item 3

Попробуйте сами »

Grow

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

<дел>

Гибкий элемент 1

элемент Flex 2

Flex item 3

Попробуйте сами »

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

Order

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

Пример

Элемент Flex 1

Элемент Flex 2

Элемент Flex 3

Пример

Flex элемент 1

элемент Flex 2

Flex item 3

Попробуйте сами »

Auto Margins

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

Пример

Гибкий элемент 1

Гибкий элемент 2

Гибкий элемент 3

Гибкий элемент 1

Гибкий элемент 2

Гибкий элемент 3

Пример

Гибкий элемент 1

элемент Flex 2

Элемент Flex 3

Элемент Flex 1

Flex пункт 2

Элемент Flex 3

Попробуйте сами »

Wrap

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

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

Example

Flex item 1

Flex Item 2

Flex Item 3

Elex Item 4

Elex 5

Elex Item 6

Elex Item 7

Elect Item 8

Elect 9

Elect 10

Elegle Item 12

Исключенное изделия 13

Исключенное изделия 14

Искусство 15

Изгиб.0003

Flex item 22

Flex item 23

Flex item 24

Flex item 25

Пример

Попробуйте сами »

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

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

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

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

Пример

Flex-элемент 1

Flex-элемент 2

Flex Item 3

Flex Item 4

Flex Item 5

Elex Item 6

Исключенное элемент 7

Искусство 8

Исключение

Elect 10

Изгиб Item 13

Elex Item 14

Исключенное изделия 15

Elex Item 16

Elex Item 17

Исключенная статья 18

Elex Item 19

Elect Atem 20

Elemp

Flex item 23

Flex item 24

Flex item 25

Пример

..< /div>

Попробуйте сами »

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

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

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

Пример

Гибкий элемент 1

Гибкий элемент 2

Гибкий элемент 3

Пример

Выровнять себя .align-self-*

классы. Допустимые классы: .align-self-start , .align-self-end , .align-self-center , .align-self-baseline и .align-self-stretch (дефолт).

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

Пример

Гибкий элемент 1

Гибкий элемент 2

Гибкий элемент 3

Пример

Элемент гибкости 1

Элемент гибкости 2

Flex item 3

Попробуйте сами »

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

Все классы Flex поставляются с дополнительными классами Размер экрана.

Символ * можно заменить на sm, md, lg или xl, что означает малый, средний, большой или большой экран.

Класс	Описание	Пример
Гибкий контейнер
`. d-*-flex`	Создает контейнер flexbox для разных экранов	Попытайся
`.d-*-inline-flex`	Создает встроенный контейнер flexbox для разных экранов	Попытайся
Направление
`.flex-*-строка`	Отображение гибких элементов горизонтально на разных экранах	Попытайся
`.flex-*-row-reverse`	Отображение гибких элементов по горизонтали и по правому краю на разных экранах	Попытайся
`.flex-*-столбец`	Отображение гибких элементов вертикально на разных экранах	Попытайся
`.flex-*-column-reverse`	Отображать гибкие элементы вертикально, в обратном порядке, на разных экранах screens	Попытайся
Обоснованное содержание
`. justify-content-*-start`	Отображение гибких элементов с самого начала (с выравниванием по левому краю) на разных экранах	Попытайся
`.justify-content-*-end`	Отображение гибких элементов в конце (выравнивание по правому краю) на разных экранах	Попытайся
`.justify-content-*-center`	Отображение гибких элементов в центре гибкого контейнера на разных экранах	Попытайся
`.justify-content-*-между`	Отображение гибких элементов «между» на разных экранах	Попытайся
`.justify-content-*-around`	Отображение гибких элементов «вокруг» на разных экранах	Попытайся
Заливка/равная ширина
`. flex-*-fill`	Принуждение гибких элементов к одинаковой ширине на разных экранах	Попытайся
Рост
`.flex-*-grow-0`	Не заставлять элементы расти на разных экранах
`.flex-*-grow-1`	Заставить предметы расти на разных экранах
Термоусадочная
`.flex-*-shrink-0`	Не уменьшать размеры элементов на разных экранах
`.flex-*-shrink-1`	Уменьшение размеров элементов на разных экранах
Заказ
`.заказ-*- 0-12`	Изменить порядок с 0 на 12 на маленьких экранах	Попытайся
Обертка
`. flex-*-nowrap`	Не размещать элементы на разных экранах	Попытайся
`.flex-*-wrap`	Перенос предметов на разные экраны	Попытайся
`.flex-*-wrap-reverse`	Обратный перенос элементов на разных экранах	Попытайся
Выравнивание содержимого
`.align-content-*-start`	Выровняйте собранные предметы с самого начала на разных экранах	Попытайся
`.align-content-*-end`	Выровняйте собранные предметы в конце на разных экранах	Попытайся
`.align-content-*-center`	Выровнять собранные предметы по центру на разных экранах	Попытайся
`. align-content-*-around`	Выровнять собранные предметы «по кругу» на разных экранах	Попытайся
`.align-content-*-stretch`	Растягивание собранных предметов на разных экранах	Попытайся
Выравнивание элементов
`.align-items-*-start`	Выровнять отдельные строки элементов с самого начала на разных экранах	Попытайся
`.align-items-*-end`	Выравнивание отдельных рядов элементов в конце на разных экранах	Попытайся
`.align-items-*-center`	Выравнивание отдельных рядов элементов по центру на разных экранах	Попытайся
`. align-items-*-baseline`	Выравнивание отдельных рядов элементов по базовой линии на разных экранах	Попытайся
`.align-items-*-stretch`	Растягивание отдельных рядов элементов на разных экранах	Попытайся
Самовыравнивание
`.align-self-*-start`	Выравнивание гибкого элемента с самого начала на разных экранах	Попытайся
`.align-self-*-end`	Выравнивание гибкого элемента в конце на разных экранах	Попытайся
`.align-self-*-center`	Выравнивание гибкого элемента по центру на разных экранах	Попытайся
`.align-self-*-baseline`	Выравнивание гибкого элемента по базовой линии на разных экранах	Попытайся
`. align-self-*-stretch`	Растягивание гибкого элемента на разных экранах	Попытайся

❮ Предыдущий Далее ❯

Центр вертикального выравнивания в Bootstrap 4 …любые кодировки

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

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

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

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

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

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

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

Bootstrap 4

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

Вариант 1 align-self-center на flexbox anycodings_css дочерний элемент

 
    <дел>
     я по центру по вертикали

https://codeply.com/go/fFqaDe5Oey

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

 
    <дел>
        <дел>
            <дел>
                я по центру по вертикали

Bootstrap 4 по центру: Выравнивание по центру страницы, правильно-ли (Bootstrap 4)? — Хабр Q&A

Как разместить блок по центру в Bootstrap 4

Bootstrap 4.

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

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

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

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

Промежутки

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

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

Реклама

Колонки · Bootstrap v5.0

Как они работают

Выравнивание

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

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

Обертывание колонок

Разрывы колонок

Изменение порядка

Класса порядка

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

Классы смещения

Утилиты полей

Автономные классы колонок

8 примеров выравнивания текста в Bootstrap 4: по центру, справа и т. д.

Центрировать текст в заголовке 1!

Центрировать текст в заголовке 2 !

Отцентрируйте текст в заголовке 3!

Отцентрируйте текст в заголовке 4!

Отцентрируйте текст в заголовке 5!

Отцентрируйте текст в заголовке 6!

Выровнять по правому краю в h2!

Выровнять по правому краю h3!

Выровнять по правому краю h2!

Выровнять по правому краю h2!

03

Выровнять по правому краю h2!

Выровнять по правому краю h2!

Выровнять h2 по левому краю!

Выровнять h3 по левому краю!

Выровнять h2 по левому краю!

0

Выровнять h2 по левому краю!

Выровнять h2 по левому краю!

Выровнять h2 по левому краю!

Демонстрация выравнивания текста в Bootstrap 4

h2: по центру на большом экране и по левому краю в среднем/меньшем

h5: по центру большого экрана и по центру среднего/меньшего

h5: по центру большого экрана и по центру среднего/меньшего

h6: по центру на большом экране и по центру среднего/меньшего размера

,

и т. д.

Демонстрация класса text-md-center

h2: по центру на среднем/большом экране и слева на меньшем

h5: по центру на среднем/большом экране и по центру на меньшем

h5: по центру среднего/большого экрана и по центру меньшего

h6: по центру среднего/большого экрана и по центру меньшего

Демонстрация класса text-sm-center

3

h2: по центру маленький/средний/большой, кроме очень маленького

h5: по центру маленький/средний/большой, кроме очень маленького

h5: по центру маленький/средний/большой, кроме очень маленького

h6: по центру маленький/средний/большой, кроме очень маленького

Пример выравнивания изображений

Bootstrap 4 Flex

Bootstrap 4 Flex

Flexbox

Example

>

Пример

Пример

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

Пример

Пример

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

Пример

6

Justify Content

Пример

Example