Как в 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-centeralign-items-center
В этом случае, мы добились горизонтального центрирования используя систему grid. Так само можно использовать указанные выше классы для горизонтального/вертикального центрирования объектов