ONE NET WIKI Free and professional IT Wiki

How to center div columns in Bootstrap 4?

2018-10-15 ONE NET WIKI

jQuery-Plugin-For-Vertical-and-Horizontal-Center-Alignment-Center-Me.jpg

There's no need for extra CSS. There are existing classes included in Bootstrap 4.

Make sure the container(s) of the form are full height. Bootstrap 4 now has a h-100 class for 100% height.


Vertical center

align-items-center: align the items vertically.

<div class="d-flex align-items-center">...</div>
Note: The height of the container with the item(s) to center must be 100%.

Horizontal center

text-center to center the inline elements & column content

mx-auto for centering inside flex elements

offset-* or mx-auto can be used to center columns (.col-)

justify-content-center to center columns (col-*) inside row

<div class="d-flex justify-content-center">...</div>

Center

Use justify-content-centeralign-items-center and h-100 to center the items.

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <form class="col-12">
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>
</div>
Editor's Note: All the articles in this website are original. If reproduced, please indicate the source and link.
2504
0
All Comments (0)
Expand to publish a comment

Web Development


Web Management


Web Marketing


Web Security