csstwitter-bootstrap

Bootstrap: Centering Elements Vertically and Horizontally


I have a page where only a form exists and I want the form to be placed in the center of the screen.

<div class="container">
  <div class="row justify-content-center align-items-center">
    <form>
      <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>

The justify-content-center aligns the form horizontally, but I can't figure out how to align it vertically. I have tried using both align-items-center and align-self-center, but neither seems to work.


A minimal reproducible example can be found here.


Solution

  • Bootstrap 5 (Updated 2021)

    Bootstrap 5 is still flexbox based so vertical centering works the same way as it did in Bootstrap 4. For example, align-items-center (flex-direction: row) and justify-content-center (flex-direction: column) can used on the flexbox parent (row or d-flex).

    Centering examples in Bootstrap 5

    Vertical center (don't forget the parent must have a defined height!):

    Horizontal center:


    Bootstrap 4.3+ (Update 2019)

    There's no need for extra CSS. What's already included in Bootstrap will work. Make sure the container(s) of the form are full height. Bootstrap 4 now has a h-100 class for 100% height...

    Vertical center:

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

    https://codeply.com/go/raCutAGHre

    the height of the container with the item(s) to center should be 100% (or whatever the desired height is relative to the centered item)

    Note: When using height:100% (percentage height) on any element, the element takes in the height of it's container. In modern browsers vh units height:100vh; can be used instead of % to get the desired height.

    Therefore, you can set html, body {height: 100%}, or use the new min-vh-100 class on container instead of h-100.


    Horizontal center:


    Vertical Align Center in Bootstrap
    Bootstrap 4 full-screen centered form
    Bootstrap 4 center input group
    Bootstrap 4 horizontal + vertical center full screen