Bootstrap Center Vertical and Horizontal Alignment

Question

I have a page where only form exists and I want 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 to use align-items-center and align-self-center, but it doesn't work.

What am I missing?

DEMO

Carol Skelly · Accepted Answer · 2021-07-14T19:03:20.463

502

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

my-auto for centering inside flex (.d-flex) elements
my-auto can be used to center columns (.col-) inside row
align-items-center to center columns (col-*) inside row

Horizontal center:

text-center to center display:inline elements & column content
mx-auto for centering inside flex elements
mx-auto can be used to center columns (.col-) inside row
justify-content-center to center columns (col-*) inside row

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:

text-center to center display: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

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

edited Jul 14 '21 at 19:03

answered Jun 28 '17 at 11:40

Carol Skelly

351,302
90
710
624

Is it OK to use the `
` tag, or should one stick to `
`s for centering content horizontally and vertically in the viewport? I've got an existing site that's got pages with sections that change color and/or background images.
– Adrian Sep 01 '17 at 12:22
Shouldn't any direct child of row be a .col? – Miguel Stevens Sep 16 '17 at 08:10
10

This answer is slightly broken. You explicitly state "there is NO NEED for additional CSS" but that is wrong. In your code sample it shows you must set body and html to be 100% in CSS outside of Bootstrap 4. Without this additional CSS your solution does not work. – Major Major Nov 13 '18 at 00:00
1

No, body and html are not "outside".. Bootstrap CSS classes can be added to them too! https://www.codeply.com/go/5ifNMHKUEy @dawn.. what specifically didn't work? Your comment is not helpful. – Carol Skelly Nov 13 '18 at 02:40
Container didn't need 100% but `h-100 justify-content-center align-items-center` worked – JMP Dec 13 '18 at 20:25
That's why the answer says "or whatever the desired height is relative to the centered item" – Carol Skelly Dec 14 '18 at 00:23
3

did not center for me vertically... i just copy and pasted your code inside a ... ... any thoughts? – user1709076 May 16 '19 at 13:08
I need to center a ` – Shmack Jun 03 '20 at 20:57
This worked perfectly. If you are looking for a quick PUG translated version: ```.row.h-100.justify-content-center.align-items-center``` – CodeConnoisseur Aug 17 '20 at 18:34
Is there a way to do this for an overlap spinner in Bootstrap 5? (where you have a grey background taking up 100% of the width/height and spinner in the middle). I see they have an example of a centered modal with a static background but not with a pure spinner without the extra modal junk. – armyofda12mnkeys Dec 14 '22 at 05:47
`m-auto` on a child inside an `h-100 d-flex` parent is all I actually needed to center one div within another. – zcoop98 Jun 01 '23 at 21:54

score 36 · Answer 2 · answered Sep 19 '17 at 11:00

36

This work for me:

<section class="h-100">
  <header class="container h-100">
    <div class="d-flex align-items-center justify-content-center h-100">
      <div class="d-flex flex-column">
        <h1 class="text align-self-center p-2">item 1</h1>
        <h4 class="text align-self-center p-2">item 2</h4>
        <button class="btn btn-danger align-self-center p-2" type="button" name="button">item 3</button>
      </div>
    </div>
  </header>
</section>

answered Sep 19 '17 at 11:00

karembadawy

431
4
4

4

Don't forget to add css styles: `` – pyOwner Aug 26 '19 at 15:32

shades3002 · Answer 3 · 2018-07-18T15:19:52.747

23

flexbox can help you. info here

<div class="d-flex flex-row justify-content-center align-items-center" style="height: 100px;">
    <div class="p-2">
     1
    </div>
    <div class="p-2">
     2
    </div>
</div>

edited Jul 18 '18 at 15:19

answered Jul 18 '18 at 15:10

shades3002

879
9
11

score 18 · Answer 4 · edited Sep 30 '18 at 00:35

18

Bootstrap has text-center to center a text. For example

<div class="container text-center">

You change the following

<div class="row justify-content-center align-items-center">

to the following

<div class="row text-center">

edited Sep 30 '18 at 00:35

answered Sep 29 '18 at 17:01

ciaran kehoe

191
1
3

score 12 · Answer 5 · answered Feb 22 '17 at 10:53

12

You need something to center your form into. But because you didn't specify a height for your html and body, it would just wrap content - and not the viewport. In other words, there was no room where to center the item in.

html, body {
  height: 100%;
}
.container, .row.justify-content-center.align-items-center {
  height: 100%;
  min-height: 100%;
}

answered Feb 22 '17 at 10:53

Bram Vanroy

27,032
24
137
239

1

Also, the `h-100` util class can be used for `height:100%` in Bootstrap 4. – Carol Skelly Feb 22 '17 at 11:37
1

I now advise to use @ZimSystem 's solution because it doesn't need custom CSS and only makes use of the classes provided by Bootstrap. – Bram Vanroy Aug 18 '17 at 17:41
1

@BramVanroy as you told i used ZimSystem 's solution but it didn't work for me. your solution working on both version 4.0.0 and 4.1.0 update also – Sahan Pasindu Nirmal Jun 16 '18 at 07:22

score 11 · Answer 6 · edited Dec 09 '20 at 02:43

11

None has worked for me. But his one did.

Since the Bootstrap 4 .row class is now display:flex you can simply use the new align-self-center flexbox utility on any column to vertically center it:

<div class="row">
   <div class="col-6 align-self-center">
      <div class="card card-block">
      Center
      </div>
   </div>
   <div class="col-6">
      <div class="card card-inverse card-danger">
      Taller
      </div>
   </div>
</div>

I learned about it from https://medium.com/wdstack/bootstrap-4-vertical-center-1211448a2eff

edited Dec 09 '20 at 02:43

Irwin

12,551
11
67
97

answered May 10 '19 at 12:35

Paulo Pedroso

3,555
2
29
34

2020...this saves my life! Thx, Paulo! – Johnny Wu Sep 04 '20 at 03:00

score 8 · Answer 7 · edited Nov 09 '21 at 16:16

8

Try the code given below while using v4 or v5.

<div class="d-flex align-items-center justify-content-center" style="height:100vh;">
  Vertically and Horizontally Aligned :)
</div>

...OR... You can use these classes if using v5.

<div class="position-absolute top-50 start-50 translate-middle">
  Vertically and Horizontally Aligned :)
</div>

Do this, and that's it :)

edited Nov 09 '21 at 16:16

General Grievance

4,555
31
31
45

answered Nov 09 '21 at 02:16

Tabassam Ali

232
4
12

Syed Waqas Bukhary · Answer 8 · 2019-11-09T08:21:33.537

4

This is working in IE 11 with Bootstrap 4.3. While the other answers were not working in IE11 in my case.

 <div class="row mx-auto justify-content-center align-items-center flex-column ">
    <div class="col-6">Something </div>
</div>

edited Nov 09 '19 at 08:21

answered Nov 07 '19 at 17:52

Syed Waqas Bukhary

5,130
5
47
59

This is the only thing that happend for me without using d-flex. Thanks Syed! – PhillipJacobs Jan 14 '23 at 20:16

score 3 · Answer 9 · answered Dec 22 '21 at 10:40

Bootstrap way

HTML

 <div class="row top-row">
        <div class="col center-text">
            <H1>Center Text Horizantally and vertically</H1>
        </div>
</div>

Custom CSS

  .top-row{
        height: 300px; //It's important to set height 
    }
  .center-text{
       display: flex;
       align-items: center;
       justify-content: center;
    }

score 2 · Answer 10 · answered Jan 22 '20 at 20:35

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="col-12 border border-info">
          <div class="d-flex justify-content-center align-items-center" style="height: 100px">
              <a href="#" class="btn btn-dark">Transfer</a>
              <a href="#" class="btn btn-dark mr-2 ml-2">Replenish</a>
              <a href="#" class="btn btn-dark mr-3">Account Details</a>
          </div>
    </div>

comrade · Answer 11 · 2020-12-04T10:10:36.027

been going thru a lot of posts on getting a form centered in the page and none of them worked. code below is from a react component using bootstrap 4.1. height should be 100vh and not 100%

<div className="container">
      <div className="d-flex justify-content-center align-items-center" style={height}>
        <form>
          <div className="form-group">
            <input className="form-control form-control-lg" placeholder="Email" type="email"/>
          </div>
          <div className="form-group">
            <input className="form-control form-control-lg" placeholder="Password" type="password"/>
          </div>
          <div className="form-group">
            <button className="btn btn-info btn-lg btn-block">Sign In</button>
          </div>
        </form>
      </div>
    </div>

where height in style is:

const height = { height: '100vh' }

score 2 · Answer 12 · answered Oct 08 '21 at 21:30

2

From bootstrap v5.0 just:

<div class="position-absolute top-50 start-50 translate-middle">
   centred
</div>

answered Oct 08 '21 at 21:30

Константин Прудников

147
1
10

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. You can find more information on how to write good answers in the help center: https://stackoverflow.com/help/how-to-answer . Good luck – nima Oct 08 '21 at 21:37

score 1 · Answer 13 · answered Jun 24 '20 at 08:06

I ended up here because I was having an issue with Bootstrap 4 grid system and an Angular *ngFor loop. I fixed it by applying a col justify-content-center class to the div implementing the ngFor:

<div class="row" style="border:1px solid red;">
  <div class="col d-flex justify-content-center">
    <button mat-raised-button>text</button>
  </div>
  <div *ngFor="let text of buttonText" class="col d-flex justify-content-center">
    <button mat-raised-button>text</button>
  </div>
</div>

which gives the result:

The EasyLearn Academy · Answer 14 · 2021-02-09T07:49:09.400

I am required to show form vertically center inside container-fluid so I developed my own code for the same.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <style>
       .container-fluid
       {
            display: table-cell;
            height: 100vh;
            width: 100vw !important;
            vertical-align: middle;
            border:1px solid black;
       }
    </style>
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-8 offset-2">
                <div class="card shadow">
                    <div class="card-header bg-danger text-white">
                        <h2>Login</h2>
                    </div>

                    <div class="card-body">
                        <form action="">
                            <div class="form-group row">
                                <label for="txtemail" class="col-form-label col-sm-2">Email</label>
                                <div class="col-sm-10">
                                    <input type="email" name="txtemail" id="txtemail" class="form-control" required />
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="txtpassword" class="col-form-label col-sm-2">Password</label>
                                <div class="col-sm-10">
                                    <input type="password" name="txtpassword" id="txtpassword" class="form-control"
                                        required />
                                </div>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-danger btn-block">Login</button>
                                <button class="btn btn-warning btn-block">clear all</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script src="js/jquery.js"></script>
        <script src="js/popper.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
</body>

</html>

score 0 · Answer 15 · edited Apr 14 '20 at 14:25

0

Use This Code In CSS :

.container {
    width: 600px;
    height: 350px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
}

edited Apr 14 '20 at 14:25

j3ff

5,719
8
38
51

answered Apr 14 '20 at 14:08

Balwinder Singh Sohi

41
5

score 0 · Answer 16 · answered Jul 19 '20 at 13:58

From the doc (bootsrap 4):

https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around

score 0 · Answer 17 · answered Oct 09 '21 at 07:30

0

bootstrap 5

body {
  display: flex;
  align-items: center;
}

https://getbootstrap.com/docs/5.1/examples/sign-in/

answered Oct 09 '21 at 07:30

Jury Gans

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 09 '21 at 07:30
also add vh-100 and that's all – Ivandez Oct 10 '21 at 21:46

score 0 · Answer 18 · answered Jun 01 '23 at 22:28

Bootstrap's m-auto is your friend!

If you have some parent container you want to suspend your content in the middle of, all you need are h-100, d-flex, and m-auto:

<div class="h-100 d-flex">
  <div class="m-auto">
    Content
  </div>
</div>

The outer container will inflate to the size of whatever container it itself exists in, and the inner container will have auto margins set on each of its sides to center it within the parent.

div > div { border: 1px solid red; }
div { border: 1px solid blue; }
body { border: 1px dashed orange; }

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css">

<body class="m-2" style="width: 600px; height: 150px;">
  <div class="h-100 d-flex">
    <div class="m-auto">
      This content is centered<br>
      both vertically and horizontally<br>
      in its container
    </div>
  </div>
</body>

(Where the document body is dashed in orange, the inner <div> container is in blue, and the child container in red.)

Bootstrap Center Vertical and Horizontal Alignment

18 Answers18

Linked

Related