Vertical Align Center in Bootstrap 4

Question

I am trying to center my Container in the middle of the page using Bootstrap 4  I have been unsuccessful thus far  Any help would be appreciated   I have built it at Codepen io so you guys can play with it and let me know what works as I am about out of ideas      x000D   x000D  var currentAuthor       x000D  var currentQuote        x000D  function randomQuote     x000D      ajax   x000D        url   https   api forismatic com api 1 0     x000D        dataType   jsonp   x000D        data   method getQuote amp format jsonp amp lang en amp jsonp     x000D        success  function  response     x000D              quote-content   html   lt h2 id  quote-content  class  display-5  gt  lt i class  fa fa-quote-left  aria-hidden  true  gt      response quoteText      lt i class  fa fa-quote-right  aria-hidden  true  gt  lt  i gt  lt  h2 gt     x000D              quote-author   html   lt p id  quote-author  class  lead  gt  lt em gt     response quoteAuthor     lt  em gt  lt  p gt     x000D           x000D          currentAuthor   response quoteAuthor  x000D          currentQuote    response quoteText x000D          x000D        x000D    x000D   x000D  function openURL url   x000D    window open url  Share    width 550  height 400  toolbar 0  scrollbars 1  location 0  statusbar 0 menubar 0  resizable 0    x000D    x000D   x000D  function tweetQuote    x000D        openURL  https   twitter com intent tweet hashtags quotes freecodecamp amp related freecodecamp amp text     encodeURIComponent       currentQuote      -     currentAuthor    x000D    x000D   x000D    document  ready function      x000D      randomQuote    x000D   x000D          get-another-quote-button   click function    x000D          randomQuote    x000D          x000D   x000D         tweet   on  click   function     x000D         tweetQuote    x000D         x000D      x000D  html  body   x000D    background-image  url  https   www mylinea com wp-content uploads beautiful-trees-stock-photo-055 jpg    x000D      background-color   17234E  x000D      margin-bottom  0  x000D      min-height  30   x000D      background-repeat  no-repeat  x000D      background-position  center  x000D      -webkit-background-size  cover  x000D      background-size  cover  x000D    x000D   x000D   x000D   btn-new-quote   x000D      color   0C0C0D  x000D      background-color  transparent  x000D      border-color   414147  x000D    x000D   x000D   btn-new-quote hover   x000D      color   0C0C0D  x000D      background-color   9A989E  x000D      border-color   0C0C0D  x000D    x000D   x000D   tweet   x000D      color  RGB 100  100  100   x000D    x000D   x000D   tweet hover   x000D      color  RGB 50  50  50   x000D    x000D   x000D   x000D   jumbotron   x000D      position  relative  x000D      top  50   x000D      transform  translateY -50    x000D      opacity   85  x000D      border-color   RGB 50  50  50   x000D      padding-bottom  8px  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt link rel  stylesheet  href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 4 0 0-alpha 6 css bootstrap min css  gt  x000D   lt div class  container  gt  x000D       lt div class  row justify-content-center align-self-center  gt  x000D           lt div class  col-sm-6  gt  x000D               lt div class  jumbotron vertical-center text-center  gt  x000D                   lt h2 id  quote-content  class  display-5  gt  lt i class  fa fa-quote-left  aria-hidden  true  gt  lt  i gt  lt i class  fa fa-quote-right  aria-hidden  true  gt  lt  i gt  lt  h2 gt  x000D                   lt p id  quote-author  class  lead  gt  lt em gt  lt  em gt  lt  p gt  x000D                   lt hr class  my-2  gt  x000D                   lt div class  row align-items-center justify-content-between  gt  x000D                       lt div class  col-sm-1-4 text-left  gt  x000D                           lt a id  tweet  href     gt  x000D                               lt h2 class  display-4  gt  lt i class  fa fa-twitter  aria-hidden  true  gt  lt  i gt  lt  h2 gt  x000D                           lt  a gt  x000D                       lt  div gt  x000D                       lt div class  col-sm-1-4 text-right  gt  x000D                           lt button id  get-another-quote-button  type  button  class  btn btn-outline-secondary  btn-new-quote  gt Don t Quote Me on This    lt  button gt  x000D                       lt  div gt  x000D   x000D                   lt  div gt  x000D               lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

lt div class  row  gt     lt div class  col-md-6  gt        lt img src   assets images ebook2 png  alt    class  img-fluid  gt     lt  div gt     lt div class  col-md-6 my-auto  gt        lt h3 gt Heading lt  h3 gt        lt p gt Some text  lt  p gt      lt  div gt   lt  div gt    This line is where the magic happens  lt div class  col-md-6 my-auto  gt   the my-auto will center the content of the column  This works great with situations like the code sample above where you might have a variable sized image and need to have the text in the column to the right line up with it

User · Answer

I did it this way with Bootstrap 4 3 1    lt div class  d-flex vh-100  gt     lt div class  d-flex w-100 justify-content-center align-self-center  gt      I m in the middle    lt  div gt   lt  div gt

User · Answer

Following bootstrap 4 classes helped me solve this   lt div class  col text-center justify-content-center align-self-center  gt       lt img width 3rem src      alt       gt   lt  div gt

User · Answer

Because none of the above worked for me  I am adding another answer   Goal  To vertically and horizontally align a div on a page using bootstrap 4 flexbox classes   Step 1  Set your outermost div to a height of 100vh  This sets the height to 100  of the Veiwport Height  If you don t do this  nothing else will work   Setting it to a height of 100  is only relative to the parent  so if the parent is not the full height of the viewport  nothing will work   In the example below  I set the Body to 100vh   Step 2  Set the container div to be the flexbox container with the d-flex class   Step 3  Center div horizontally with the justify-content-center class   Step 4  Center div vertically with the align-items-center  Step 5  Run page  view your vertically and horizontally centered div   Note that there is no special class that needs to be set on the centered div itself  the child div    lt body style  background-color  f2f2f2  height 100vh   gt    lt div class  h-100 d-flex justify-content-center align-items-center  gt       lt div style  height 600px  background-color white  width 600px   gt   lt  div gt    lt  div gt    lt  body gt

User · Answer

In Bootstrap 4  beta   use align-middle  Refer to Bootstrap 4 Documentation on Vertical alignment      Change the alignment of elements with the vertical-alignment   utilities  Please note that vertical-align only affects inline    inline-block  inline-table  and table cell elements       Choose from  align-baseline   align-top   align-middle   align-bottom     align-text-bottom  and  align-text-top as needed

User · Answer

use  my-auto  bootsrap4  css class on yor div

User · Answer

I ve tried all the answers herefrom  but found out here is the difference between h-100 and  vh-100 Here is my solution           lt div className  container vh-100 d-flex align-items-center col justify-content-center  gt           lt div className    gt                            lt  div gt         lt  div  gt

User · Answer

In Bootstrap 4 1 3   This worked for me when I was trying to center a bootstrap badge inside of a container  gt  row  gt  column next to a h1 title   What did work was some simple css    my-valign-center     vertical-align  50       or   lt span class  badge badge-pill  style  vertical-align  50    gt My Badge lt  span gt

User · Answer

jumbotron       position  relative      top  50       transform  translateY -50

User · Answer

you can vertically align your container by making the parent container flex and adding align-items center   body     display flex    align-items center      Updated Pen

User · Answer

lt  DOCTYPE html gt   lt html lang  en  gt   lt head gt     lt title gt Bootstrap Example lt  title gt     lt meta charset  utf-8  gt     lt meta name  viewport  content  width device-width  initial-scale 1  gt     lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 2 1 css bootstrap min css  gt     lt script src  https   ajax googleapis com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt     lt script src  https   cdnjs cloudflare com ajax libs popper js 1 14 6 umd popper min js  gt  lt  script gt     lt script src  https   maxcdn bootstrapcdn com bootstrap 4 2 1 js bootstrap min js  gt  lt  script gt   lt  head gt   lt body gt     lt div class  container  gt       lt div class  row align-items-center justify-content-center  style  height 100vh   gt                 lt div gt Center Div Here lt  div gt       lt  div gt   lt  div gt   lt  body gt   lt  html gt

User · Answer

Place your content within a flexbox container that is 100  high i e h-100  Then justify the content centrally by using justify-content-center class    lt section class  container h-100 d-flex justify-content-center  gt       lt div class  jumbotron my-auto  gt           lt h1 class  display-3  gt Hello  Malawi  lt  h1 gt       lt  div gt   lt  section gt

User · Answer

Important  Vertical center is relative to the height of the parent  If the parent of the element you re trying to center has no defined height  none of the vertical centering solutions will work   Now  onto vertical centering    Bootstrap 5  Updated 2020  Bootstrap 5 is still flexbox based so vertical centering works the same way as Bootstrap 4  For example align-items-center and justify-content-center can used on the flexbox parent  row or d-flex   https   codeply com p 0VM5MJ7Had Bootstrap 4 You can use the new flexbox  amp  size utilities to make the container full-height and display  flex  These options don t require extra CSS  except that the height of the container  ie html body  must be 100    Option 1 align-self-center on flexbox child  lt div class  quot container d-flex h-100 quot  gt       lt div class  quot row justify-content-center align-self-center quot  gt       I m vertically centered      lt  div gt   lt  div gt   https   codeply com go fFqaDe5Oey Option 2 align-items-center on flexbox parent   row is display flex  flex-direction row   lt div class  quot container h-100 quot  gt       lt div class  quot row align-items-center h-100 quot  gt           lt div class  quot col-6 mx-auto quot  gt               lt div class  quot jumbotron quot  gt                  I m vertically centered              lt  div gt           lt  div gt       lt  div gt   lt  div gt    https   codeply com go BumdFnmLuk Option 3 justify-content-center on flexbox parent   card is display flex flex-direction column   lt div class  quot container h-100 quot  gt       lt div class  quot row align-items-center h-100 quot  gt           lt div class  quot col-6 mx-auto quot  gt               lt div class  quot card h-100 border-primary justify-content-center quot  gt                   lt div gt                         card content                     lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt   https   codeply com go 3gySSEe7nd  More on Bootstrap 4 Vertical Centering Now that Bootstrap 4 offers flexbox and other utilities  there are many approaches to vertical alignment  http   www codeply com go WG15ZWC4lf 1 - Vertical Center Using Auto Margins  Another way to vertically center is to use my-auto  This will center the element within it s container  For example  h-100 makes the row full height  and my-auto will vertically center the col-sm-12 column   lt div class  quot row h-100 quot  gt       lt div class  quot col-sm-12 my-auto quot  gt           lt div class  quot card card-block w-25 quot  gt Card lt  div gt       lt  div gt   lt  div gt   Vertical Center Using Auto Margins Demo my-auto represents margins on the vertical y-axis and is equivalent to  margin-top  auto  margin-bottom  auto    2 - Vertical Center with Flexbox   Since Bootstrap 4  row is now display flex you can simply use align-self-center 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   or  use align-items-center on the entire  row to vertically center align all col-  in the row            lt div class  quot row align-items-center quot  gt              lt div class  quot col-6 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   Vertical Center Different Height Columns Demo See this Q A to center  but maintain equal height  3 - Vertical Center Using Display Utils  Bootstrap 4 has display utils that can be used for display table  display table-cell  display inline  etc   These can be used with the vertical alignment utils to align inline  inline-block or table cell elements   lt div class  quot row h-50 quot  gt       lt div class  quot col-sm-12 h-100 d-table quot  gt           lt div class  quot card card-block d-table-cell align-middle quot  gt              I am centered vertically          lt  div gt       lt  div gt   lt  div gt   Vertical Center Using Display Utils Demo More examples Vertical center image in  lt div gt  Vertical center  row in  container Vertical center and bottom in  lt div gt  Vertical center child inside parent Vertical center full screen jumbotron  Important  Did I mention height  Remember vertical centering is relative to the height of the parent element  If you want to center on the entire page  in most cases  this should be your CSS    body html     height  100      Or use min-height  100vh  min-vh-100 in Bootstrap 4 1   on the parent container  If you want to center a child element inside the parent  The parent must have a defined height  Also see  Vertical alignment in bootstrap 4 Bootstrap 4 Center Vertical and Horizontal Alignment

User · Answer

Vertical align Using this bootstrap 4 classes   parent  d-table AND child  d-table-cell  amp  align-middle  amp  text-center  eg   lt div class  quot tab-icon-holder d-table bg-light quot  gt      lt div class  quot d-table-cell align-middle text-center quot  gt        lt img src  quot assets images devices Xl png quot  height  quot 30rem quot  gt      lt  div gt   lt  div gt   and if you want parent be circle   lt div class  quot tab-icon-holder d-table bg-light rounded-circle quot  gt      lt div class  quot d-table-cell align-middle text-center quot  gt        lt img src  quot assets images devices Xl png quot  height  quot 30rem quot  gt      lt  div gt   lt  div gt   which two custom css classes are as follow   tab-icon-holder     width  3 5rem    height  3 5rem      rounded-circle     border-radius  50   important    Final usage can be like for example   lt div class  quot col-md-5 mx-auto text-center quot  gt       lt div class  quot d-flex justify-content-around quot  gt        lt div class  quot tab-icon-holder d-table bg-light rounded-circle quot  gt          lt div class  quot d-table-cell align-middle text-center quot  gt            lt img src  quot assets images devices Xl png quot  height  quot 30rem quot  gt          lt  div gt        lt  div gt         lt div class  quot tab-icon-holder d-table bg-light rounded-circle quot  gt          lt div class  quot d-table-cell align-middle text-center quot  gt            lt img src  quot assets images devices Lg png quot  height  quot 30rem quot  gt          lt  div gt        lt  div gt                  lt  div gt   lt  div gt   Also in some cases you can use following code   parent  h-100 d-table mx-auto AND child  d-table-cell  amp  align-middle

User · Answer

lt div class  col-lg-5 col-sm-5 offset-1 d-flex  gt               lt div class  offer-txt justify-content-center align-self-center  gt                   lt span class  inner-title  gt Our Offer lt  span gt                   lt h2 class  section-title  gt Today   s Special  lt  h2 gt                   lt p gt One morning  when Gregor Samsa woke from troubled dreams  he found himself transformed in his bed into vermin  He lay on his armour-like back  and if he lifted his head a little he could see his brown belly  lt  p gt               lt  div gt           lt  div gt

[html] Vertical Align Center in Bootstrap 4

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to flexbox

Examples related to bootstrap-4