Как в Bootstrap выровнять форму по центру?

Как в Bootstrap выровнять форму и поле textarea по центру?

  <div class="container">
        <div class="row">
            <div class="col text-center">
                <form style="max-width: 500px;"><textarea class="form-control"></textarea></form>
            </div>
        </div>
    </div>

Ответы (3 шт):

Автор решения: radar4ick

Добавьте класс justify-content-center для div с классом row для того чтобы все вложенные div с классом col были выровнены по центру. Но для точного результата еще замените класс col на col-6, чтобы занять 50% ширины и выровнять их по центру

<div class="container">
        <div class="row justify-content-center">
            <div class="col text-center">
                <form style="max-width: 500px;"><textarea class="form-control"></textarea></form>
            </div>
        </div>
    </div>

P.S. Вот ссылка на документацию

→ Ссылка
Автор решения: Faraday

Используя только Bootstrap:

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-auto">
            <form>
                <div class="form-group">
                    <textarea class="form-control" rows="5"></textarea>
                </div>
            </form>
        </div>
    </div>
</div>

Вообще в Bootstrap есть два основных класса для центрирования

  • justify-content-center
  • align-items-center

В этом случае, мы добились горизонтального центрирования используя систему grid. Так само можно использовать указанные выше классы для горизонтального/вертикального центрирования объектов

→ Ссылка