How to vertically center a container in Bootstrap

Question

I m looking for a way to vertically center the container div inside the jumbotron and to set it in the middle of the page    The  jumbotron has to be adapted to the full height and width of the screen  The  container div has a width of 1025px and should be in the middle of the page  vertically center    I want this page to have the jumbotron adapted to the height and width of the screen along with the container vertically center to the jumbotron  How can I achieve it    x000D   x000D   jumbotron   x000D    height 100   x000D    width 100   x000D    x000D   container   x000D    width 1025px  x000D    x000D   jumbotron  container   x000D    max-width  100   x000D     x000D   lt link href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 0 0 css bootstrap min css  rel  stylesheet   gt  x000D   lt div class  jumbotron  gt  x000D       lt div class  container text-center  gt  x000D           lt h1 gt The easiest and powerful way lt  h1 gt  x000D           lt div class  row  gt  x000D               lt div class  col-md-7  gt  x000D                    lt div class  top-bg  gt  lt  div gt  x000D               lt  div gt  x000D   x000D               lt div class  col-md-5 iPhone-features  style  margin-left -25px   gt  x000D                   lt ul class  top-features  gt  x000D                       lt li gt  x000D                           lt span gt  lt i class  fa fa-random simple bg top-features-bg  gt  lt  i gt  lt  span gt  x000D                           lt p gt  lt strong gt Redirect lt  strong gt  lt br gt Visitors where they converts more  lt  p gt  x000D                       lt  li gt  x000D                       lt li gt  x000D                           lt span gt  lt i class  fa fa-cogs simple bg top-features-bg  gt  lt  i gt  lt  span gt  x000D                           lt p gt  lt strong gt Track lt  strong gt  lt br gt Views  Clicks and Conversions  lt  p gt  x000D                       lt  li gt  x000D                       lt li gt  x000D                           lt span gt  lt i class  fa fa-check simple bg top-features-bg  gt  lt  i gt  lt  span gt  x000D                           lt p gt  lt strong gt Check lt  strong gt  lt br gt Constantly the status of your links  lt  p gt  x000D                       lt  li gt  x000D                       lt li gt  x000D                           lt span gt  lt i class  fa fa-users simple bg top-features-bg  gt  lt  i gt  lt  span gt  x000D                           lt p gt  lt strong gt Collaborate lt  strong gt  lt br gt With Customers  Partners and Co-Workers  lt  p gt  x000D                       lt  li gt  x000D                           lt a href  pricing-and-signup html  class  btn-primary btn h2 lightBlue get-Started-btn  gt GET STARTED lt  a gt  x000D                           lt h6 class  get-Started-sub-btn  gt FREE VERSION AVAILABLE  lt  h6 gt  x000D                   lt  ul gt  x000D               lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

My prefered technique    body     display  table    position  absolute    height  100     width  100       jumbotron      display  table-cell     vertical-align  middle        Demo   x000D   x000D  body   x000D    display  table  x000D    position  absolute  x000D    height  100   x000D    width  100   x000D    x000D   x000D   jumbotron   x000D     display  table-cell  x000D     vertical-align  middle  x000D    x000D   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  gt  x000D   lt div class  jumbotron vertical-center  gt  x000D     lt div class  container text-center  gt  x000D       lt h1 gt The easiest and powerful way lt  h1 gt  x000D       lt div class  row  gt  x000D         lt div class  col-md-7  gt  x000D           lt div class  top-bg  gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum  lt  div gt  x000D         lt  div gt  x000D   x000D         lt div class  col-md-5 iPhone-features  gt  x000D           lt ul class  top-features  gt  x000D             lt li gt  x000D               lt span gt  lt i class  fa fa-random simple bg top-features-bg  gt  lt  i gt  lt  span gt  x000D               lt p gt  lt strong gt Redirect lt  strong gt  lt br gt Visitors where they converts more  lt  p gt  x000D             lt  li gt  x000D             lt li gt  x000D               lt span gt  lt i class  fa fa-cogs simple bg top-features-bg  gt  lt  i gt  lt  span gt  x000D               lt p gt  lt strong gt Track lt  strong gt  lt br gt Views  Clicks and Conversions  lt  p gt  x000D             lt  li gt  x000D             lt li gt  x000D               lt span gt  lt i class  fa fa-check simple bg top-features-bg  gt  lt  i gt  lt  span gt  x000D               lt p gt  lt strong gt Check lt  strong gt  lt br gt Constantly the status of your links  lt  p gt  x000D             lt  li gt  x000D             lt li gt  x000D               lt span gt  lt i class  fa fa-users simple bg top-features-bg  gt  lt  i gt  lt  span gt  x000D               lt p gt  lt strong gt Collaborate lt  strong gt  lt br gt With Customers  Partners and Co-Workers  lt  p gt  x000D             lt  li gt  x000D             lt a href  pricing-and-signup html  class  btn-primary btn h2 lightBlue get-Started-btn  gt GET STARTED lt  a gt  x000D             lt h6 class  get-Started-sub-btn  gt FREE VERSION AVAILABLE  lt  h6 gt  x000D           lt  ul gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    See also this Fiddle

User · Answer

In Bootstrap 4   to center the child horizontally  use bootstrap-4 class   justify-content-center   to center the child vertically  use bootstrap-4 class    align-items-center   but remember don t forget to use d-flex class with these it s a bootstrap-4 utility class  like so   lt div class  d-flex justify-content-center align-items-center  style  height 100px   gt       lt span class  bg-primary  gt MIDDLE lt  span gt       lt  div gt    Note  make sure to add bootstrap-4 utilities if this code does not work  I know it s not the direct answer to this question but it may help someone

User · Answer

Tested in IE  Firefox  and Chrome    x000D   x000D   parent-container   x000D      position  relative  x000D      height 100   x000D      width  100   x000D    x000D   x000D   child-container   x000D      position  absolute  x000D      top  50   x000D      left  50   x000D      transform  translate -50   -50    x000D    x000D   lt div class  parent-container  gt  x000D       lt div class  child-container  gt  x000D           lt h2 gt Header Text lt  h2 gt  x000D           lt span gt Some Text lt  span gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Found on https   css-tricks com centering-css-complete-guide

User · Answer

add Bootstrap css then add this to your css  x000D   x000D      x000D  html  body height 100   margin 0 padding 0  x000D    x000D   container-fluid  x000D    height 100   x000D    display table  x000D    width  100   x000D    padding  0  x000D    x000D    x000D   row-fluid  height  100   display table-cell  vertical-align  middle   x000D    x000D    x000D   x000D   centering   x000D    float none  x000D    margin 0 auto  x000D    x000D  Now call in your page  x000D   x000D   lt div class  container-fluid  gt  x000D       lt div class  row-fluid  gt  x000D           lt div class  centering text-center  gt  x000D             Am in the Center Now  -  x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

for bootstrap4 vertical center of few items  d-flex for flex rules  flex-column for vertical direction on items  justify-content-center for centering  style  height  300px   must have for set points where center be calc or use h-100 class  then for horizontal center div d-flex justify-content-center and some container  so we have hierarhy of 3 tag  div-column -  div-row -  div-container        lt div class  d-flex flex-column justify-content-center bg-secondary           style  height  300px   gt           lt div class  d-flex justify-content-center  gt              lt div class bg-primary gt Flex item lt  div gt           lt  div gt           lt div class  d-flex justify-content-center  gt              lt div class bg-primary gt Flex item lt  div gt           lt  div gt         lt  div gt

User · Answer

The Flexible box way  Vertical alignment is now very simple by the use of Flexible box layout  Nowadays  this method is supported in a wide range of web browsers except Internet Explorer 8  amp  9  Therefore we d need to use some hacks polyfills or different approaches for IE8 9   In the following I ll show you how to do that in only 3 lines of text  regardless of old flexbox syntax    Note  it s better to use an additional class instead of altering  jumbotron to achieve the vertical alignment  I d use vertical-center class name for instance   Example Here  A Mirror on jsbin     lt div class  jumbotron vertical-center  gt   lt  --                         --- Added class  -- gt     lt div class  container  gt             lt  div gt   lt  div gt     vertical-center     min-height  100       Fallback for browsers do NOT support vh unit      min-height  100vh     These two lines are counted as one  -              display  flex    align-items  center      Important notes  Considered in the demo     A percentage values of height or min-height properties is relative to the height of the parent element  therefore you should specify the height of the parent explicitly  Vendor prefixed   old flexbox syntax omitted in the posted snippet due to brevity  but exist in the online example  In some of old web browsers such as Firefox 9  in which I ve tested   the flex container -  vertical-center in this case - won t take the available space inside the parent  therefore we need to specify the width property like  width  100   Also in some of web browsers as mentioned above  the flex item -  container in this case - may not appear at the center horizontally  It seems the applied left right margin of auto doesn t have any effect on the flex item  Therefore we need to align it by box-pack   justify-content    For further details and or vertical alignment of columns  you could refer to the topic below    vertical-align with Bootstrap 3     The traditional way for legacy web browsers  This is the old answer I wrote at the time I answered this question  This method has been discussed here and it s supposed to work in Internet Explorer 8 and 9 as well  I ll explain it in short   In inline flow  an inline level element can be aligned vertically to the middle by vertical-align  middle declaration  Spec from W3C      middle   Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent    In cases that the parent -  vertical-center element in this case - has an explicit height  by any chance if we could have a child element having the exact same height of the parent  we would be able to move the baseline of the parent to the midpoint of the full-height child and surprisingly make our desired in-flow child - the  container - aligned to the center vertically   Getting all together  That being said  we could create a full-height element within the  vertical-center by   before or   after pseudo elements and also change the default display type of it and the other child  the   container to inline-block   Then use vertical-align  middle  to align the inline elements vertically   Here you go    lt div class  jumbotron vertical-center  gt     lt div class  container  gt             lt  div gt   lt  div gt     vertical-center     height 100     width 100      text-align  center      align the inline -block  elements horizontally      font  0 0 a             remove the gap between inline -block  elements        vertical-center before         create a full-height inline block pseudo element      content         display  inline-block    vertical-align  middle        vertical alignment of the inline element      height  100       vertical-center  gt   container     max-width  100      display  inline-block    vertical-align  middle      vertical alignment of the inline element                                  reset the font property      font  16px 1  Helvetica Neue   Helvetica  Arial  sans-serif      WORKING DEMO   Also  to prevent unexpected issues in extra small screens  you can reset the height of the  pseudo-element to auto or 0 or change its display type to none if needed so    media  max-width  768px       vertical-center before       height  auto         Or        display  none          UPDATED DEMO  And one more thing   If there are footer header sections around the container  it s better to position that elements properly  relative  absolute  up to you   and add a higher z-index value  for assurance  to keep them always on the top of the others

User · Answer

If you re using Bootstrap 4  you just have to add 2 divs    x000D   x000D   jumbotron  x000D    height 100   x000D    width 100   x000D    x000D   lt script src  https   code jquery com jquery-3 2 1 slim min js  gt  lt  script gt      x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 0 0 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt body gt  x000D     lt div class  jumbotron  gt  x000D       lt div class  d-table w-100 h-100  gt  x000D         lt div class  d-table-cell w-100 h-100 align-middle  gt  x000D           lt h5 gt  x000D            your stuff    x000D           lt  h5 gt  x000D           lt div class  container  gt  x000D             lt div class  row  gt  x000D               lt div class  col-12  gt  x000D                 lt p gt  x000D                  More stuff    x000D                 lt  p gt  x000D               lt  div gt  x000D             lt  div gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  body gt  x000D   x000D   x000D    The classes  d-table  d-table-cell  w-100  h-100 and align-middle will do the job

User · Answer

Vertically align center with bootstrap 4 Add this class  d-flex align-items-center to the element Example If you had this   lt div class  quot col-3 quot  gt   change it to this   lt div class  quot col-3 d-flex align-items-center gt

User · Answer

Give the container class    container      height  100vh      width  100vw      display  flex      Give the div that s inside the container   align-content  center    All the content inside this div will show up in the middle of the page

User · Answer

Update 2020 Bootstrap 4 includes flexbox  so the method of vertical centering is much easier and doesn t require extra CSS  Just use the d-flex and align-items-center utility classes    lt div class  quot jumbotron d-flex align-items-center quot  gt     lt div class  quot container quot  gt      content    lt  div gt   lt  div gt   http   www codeply com go ui6ABmMTLv Important  Vertical centering is relative to height  The parent container of the items you re attempting to center must have a defined height  If you want the height of the page use vh-100 or min-vh-100 on the parent  For example   lt div class  quot jumbotron d-flex align-items-center min-vh-100 quot  gt     lt div class  quot container text-center quot  gt      I am centered vertically    lt  div gt   lt  div gt    Also see  https   stackoverflow com questions 42252443 vertical-align-center-in-bootstrap-4

[html] How to vertically center a container in Bootstrap?

Demo

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to vertical-alignment