Bootstrap 4 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    lt div class  container  gt     lt div class  row justify-content-center align-items-center  gt       lt form gt         lt div class  form-group  gt           lt label for  formGroupExampleInput  gt Example label lt  label gt           lt input type  text  class  form-control  id  formGroupExampleInput  placeholder  Example input  gt         lt  div gt         lt div class  form-group  gt           lt label for  formGroupExampleInput2  gt Another label lt  label gt           lt input type  text  class  form-control  id  formGroupExampleInput2  placeholder  Another input  gt         lt  div gt       lt  form gt        lt  div gt     lt  div gt    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

User · Answer

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

User · Answer

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

User · Answer

Use This Code In CSS         container       width  600px      height  350px      position  absolute      top  50       left  50       transform  translate -50   -50        display  inline-flex

User · Answer

flexbox can help you  info here   lt div class  d-flex flex-row justify-content-center align-items-center  style  height  100px   gt       lt div class  p-2  gt       1      lt  div gt       lt div class  p-2  gt       2      lt  div gt   lt  div gt

User · Answer

Update 2019 - Bootstrap 4 3 1 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   lt div class  quot container h-100 quot  gt     lt div class  quot row h-100 justify-content-center align-items-center quot  gt       lt form class  quot col-12 quot  gt         lt div class  quot form-group quot  gt           lt label for  quot formGroupExampleInput quot  gt Example label lt  label gt           lt input type  quot text quot  class  quot form-control quot  id  quot formGroupExampleInput quot  placeholder  quot Example input quot  gt         lt  div gt         lt div class  quot form-group quot  gt           lt label for  quot formGroupExampleInput2 quot  gt Another label lt  label gt           lt input type  quot text quot  class  quot form-control quot  id  quot formGroupExampleInput2 quot  placeholder  quot Another input quot  gt         lt  div gt       lt  form gt        lt  div gt   lt  div gt   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  amp  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 4 Bootstrap 4 full-screen centered form Bootstrap 4 center input group Bootstrap 4 horizontal   vertical center full screen

User · Answer

Bootstrap has text-center to center a text  For example   lt div class  container text-center  gt    You change the following   lt div class  row justify-content-center align-items-center  gt    to the following   lt div class  row text-center  gt

User · Answer

x000D   x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 4 1 css bootstrap min css  rel  stylesheet   gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D       lt div class  col-12 border border-info  gt  x000D             lt div class  d-flex justify-content-center align-items-center  style  height  100px  gt  x000D                 lt a href     class  btn btn-dark  gt Transfer lt  a gt  x000D                 lt a href     class  btn btn-dark mr-2 ml-2  gt Replenish lt  a gt  x000D                 lt a href     class  btn btn-dark mr-3  gt Account Details lt  a gt  x000D             lt  div gt  x000D       lt  div gt  x000D   x000D   x000D

User · Answer

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   lt div class  quot row quot  style  quot border 1px solid red  quot  gt     lt div class  quot col d-flex justify-content-center quot  gt       lt button mat-raised-button gt text lt  button gt     lt  div gt     lt div  ngFor  quot let text of buttonText quot  class  quot col d-flex justify-content-center quot  gt       lt button mat-raised-button gt text lt  button gt     lt  div gt   lt  div gt   which gives the result

User · Answer

This is working in IE 11 with Bootstrap 4 3  While the other answers were not working in IE11 in my case      lt div class  row mx-auto justify-content-center align-items-center flex-column   gt       lt div class  col-6  gt Something  lt  div gt   lt  div gt

User · Answer

This work for me    lt section class  h-100  gt     lt header class  container h-100  gt       lt div class  d-flex align-items-center justify-content-center h-100  gt         lt div class  d-flex flex-column  gt           lt h1 class  text align-self-center p-2  gt item 1 lt  h1 gt           lt h4 class  text align-self-center p-2  gt item 2 lt  h4 gt           lt button class  btn btn-danger align-self-center p-2  type  button  name  button  gt item 3 lt  button gt         lt  div gt       lt  div gt     lt  header gt   lt  section gt

User · Answer

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   lt div className  quot container quot  gt         lt div className  quot d-flex justify-content-center align-items-center quot  style  height  gt           lt form gt             lt div className  quot form-group quot  gt               lt input className  quot form-control form-control-lg quot  placeholder  quot Email quot  type  quot email quot   gt             lt  div gt             lt div className  quot form-group quot  gt               lt input className  quot form-control form-control-lg quot  placeholder  quot Password quot  type  quot password quot   gt             lt  div gt             lt div className  quot form-group quot  gt               lt button className  quot btn btn-info btn-lg btn-block quot  gt Sign In lt  button gt             lt  div gt           lt  form gt         lt  div gt       lt  div gt    where height in style is   const height     height   100vh

User · Answer

I am required to show form vertically center inside container-fluid so I developed my own code for the same   lt  DOCTYPE html gt   lt html lang  quot en quot  gt    lt head gt       lt meta charset  quot UTF-8 quot  gt       lt meta name  quot viewport quot  content  quot width device-width  initial-scale 1 0 quot  gt       lt title gt Document lt  title gt       lt link rel  quot stylesheet quot  type  quot text css quot  href  quot css bootstrap min css quot  gt       lt style gt          container-fluid                      display  table-cell              height  100vh              width  100vw  important              vertical-align  middle              border 1px solid black                lt  style gt   lt  head gt    lt body gt       lt div class  quot container-fluid quot  gt           lt div class  quot row quot  gt               lt div class  quot col-8 offset-2 quot  gt                   lt div class  quot card shadow quot  gt                       lt div class  quot card-header bg-danger text-white quot  gt                           lt h2 gt Login lt  h2 gt                       lt  div gt                        lt div class  quot card-body quot  gt                           lt form action  quot  quot  gt                               lt div class  quot form-group row quot  gt                                   lt label for  quot txtemail quot  class  quot col-form-label col-sm-2 quot  gt Email lt  label gt                                   lt div class  quot col-sm-10 quot  gt                                       lt input type  quot email quot  name  quot txtemail quot  id  quot txtemail quot  class  quot form-control quot  required   gt                                   lt  div gt                               lt  div gt                               lt div class  quot form-group row quot  gt                                   lt label for  quot txtpassword quot  class  quot col-form-label col-sm-2 quot  gt Password lt  label gt                                   lt div class  quot col-sm-10 quot  gt                                       lt input type  quot password quot  name  quot txtpassword quot  id  quot txtpassword quot  class  quot form-control quot                                          required   gt                                   lt  div gt                               lt  div gt                               lt div class  quot form-group quot  gt                                   lt button class  quot btn btn-danger btn-block quot  gt Login lt  button gt                                   lt button class  quot btn btn-warning btn-block quot  gt clear all lt  button gt                               lt  div gt                           lt  form gt                       lt  div gt                   lt  div gt               lt  div gt           lt  div gt           lt script src  quot js jquery js quot  gt  lt  script gt           lt script src  quot js popper min js quot  gt  lt  script gt           lt script src  quot js bootstrap min js quot  gt  lt  script gt   lt  body gt    lt  html gt

User · Answer

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   lt div class  quot row quot  gt      lt div class  quot col-6 align-self-center quot  gt         lt div class  quot card card-block quot  gt        Center        lt  div gt      lt  div gt      lt div class  quot col-6 quot  gt         lt div class  quot card card-inverse card-danger quot  gt        Taller        lt  div gt      lt  div gt   lt  div gt   I learned about it from https   medium com wdstack bootstrap-4-vertical-center-1211448a2eff

[css] Bootstrap 4 Center Vertical and Horizontal Alignment

Examples related to css

Examples related to twitter-bootstrap

Examples related to bootstrap-4

Examples related to centering