In a bootstrap responsive page how to center a div

Question

I need to create a responsive page using bootstrap by position a div at the centre of a page as like in the below mentioned layout

User · Answer

without display table and without bootstrap , i would rather do that

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4 col-md-offset-4" style="background:red">TEXT</div>
    </div>
</div>


 html, body, .container-table {
    height: 100%;
}
.container-table {
    width:100vw;
  height:150px;
  border:1px solid black;
}
.vertical-center-row {
   margin:auto;
  width:30%;
  padding:63px;
  text-align:center;

}

http://codepen.io/matoeil/pen/PbbWgQ

User · Answer

You don t need to change anything in CSS you can directly write this in class and you will get the result    lt div class  col-lg-4 col-md-4 col-sm-4 container justify-content-center  gt     lt div class  col  style  background red  gt      TEXT    lt  div gt   lt  div gt

User · Answer

In Bootstrap 4  use    lt div class  d-flex justify-content-center  gt     lt  div gt    You can also change the position depending on what you want    lt div class  d-flex justify-content-start  gt     lt  div gt   lt div class  d-flex justify-content-end  gt     lt  div gt   lt div class  d-flex justify-content-between  gt     lt  div gt   lt div class  d-flex justify-content-around  gt     lt  div gt    Reference here

User · Answer

Not the best way  but will still work   lt div class  container-fluid h-100  gt   lt div class  row h-100  gt   lt div class  col-lg-12  gt  lt  div gt   lt div class  col-lg-12  gt   lt div class  row h-100  gt     lt div class  col-lg-4  gt  lt  div gt     lt div class  col-lg-4 border  gt      This div is in middle    lt  div gt     lt div class  col-lg-4  gt  lt  div gt   lt  div gt    lt  div gt   lt div class  col-lg-12  gt  lt  div gt   lt  div gt    lt  div gt

User · Answer

Try this  For the example  I used a fixed height  I think it is doesn t affect the responsive scenario    x000D   x000D   lt html lang  en  gt  x000D   lt head gt  x000D       lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  gt  x000D   lt  head gt  x000D   lt body gt  x000D       lt div class  d-flex justify-content-center align-items-center bg-secondary w-100  style  height  300px   gt  x000D           lt div class  bg-primary  style  width  200px  height  50px   gt  lt  div gt  x000D       lt  div gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

I think the simplest way to accomplish the layout with bootstrap is like this    lt section gt   lt div class  container  gt       lt div class  row  gt           lt div align  center  gt               lt div style  max-width  200px  background-color  blueviolet   gt                   lt div gt                       lt h1 style  color  white   gt Content goes here lt  h1 gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt      all I did was to add layers of divs that allowed me to center the div  but since I am not using percentages  you need to specify the max-width of the div to be center   You can use this same method to center more than one column  you just need to add more div layers    lt div class  container  gt       lt div class  row  gt           lt div align  center  gt               lt div style  max-width  400px  background-color  blueviolet   gt                   lt div class  col-md-12 col-sm-12 col-xs-12  style  background-color  blueviolet   gt                       lt div class  col-md-8 col-sm-8 col-xs-12  style  background-color  darkcyan   gt                           lt h1 style  color  white   gt Some content lt  h1 gt                       lt  div gt                       lt div class  col-md-4 col-sm-4 col-xs-12  style  background-color  blue   gt                           lt p style  color  white   gt More content lt  p gt                       lt  div gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    Note  that I added a div with column 12 for md  sm and xs  if you don t do this the first div with background color  in this case  blueviolet   will collapse  you will be able to see the child divs  but not the background color

User · Answer

x000D   x000D  body      height  100vh      container      height  100     x000D   lt link href  https   stackpath bootstrapcdn com bootstrap 4 4 1 css bootstrap min css  rel  stylesheet   gt     lt div class  container text-center d-flex align-items-center justify-content-center  gt           lt div gt               lt div gt                   lt h1 gt Counter lt  h1 gt               lt  div gt               lt div gt                   lt span gt 0 lt  span gt               lt  div gt               lt div gt                   lt button class  btn btn-outline-primary  gt Decrease lt  button gt                   lt button class  btn btn-danger  gt Reset lt  button gt                   lt button class  btn btn-outline-success  gt Increase lt  button gt               lt  div gt           lt  div gt       lt  div gt  x000D   x000D   x000D   you can do also that way

User · Answer

jsFiddle  HTML    lt div class  container  id  parent  gt     lt div class  row  gt       lt div class  col-lg-12  gt text        lt div class  row   gt           lt div class  col-md-4 col-md-offset-4  id  child  gt TEXT lt  div gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt    CSS    parent           text-align  center     child       margin  0 auto      display  inline-block      background  red      color  white

User · Answer

For actual version of Bootstrap 4 3 1 use  Style   lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 3 1 css bootstrap min css  gt   lt style type  text css  gt  html  body       height  100      lt  style gt    Code   lt div class  h-100 d-flex justify-content-center  gt   lt div class  jumbotron my-auto  gt   lt  -- example content -- gt   lt div class  alert alert-success  role  alert  gt   lt h4 class  alert-heading  gt Title lt  h4 gt   lt p gt Desc lt  p gt   lt  div gt   lt  --   example content -- gt   lt  div gt   lt  div

User · Answer

UPDATE for Bootstrap 4  Simpler vertical grid alignement with flex-box   x000D   x000D   import url  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 css bootstrap min css    x000D  html  x000D  body   x000D    height  100  x000D    x000D   lt div class  h-100 row align-items-center  gt  x000D     lt div class  col  style  background red  gt  x000D      TEXT x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Solution for Bootstrap 3   x000D   x000D   import url  http   getbootstrap com dist css bootstrap css    x000D   html  body   container-table   x000D      height  100   x000D    x000D   container-table   x000D      display  table  x000D    x000D   vertical-center-row   x000D      display  table-cell  x000D      vertical-align  middle  x000D    x000D   lt script src  http   cdnjs cloudflare com ajax libs twitter-bootstrap 2 1 0 bootstrap min js  gt  lt  script gt  x000D   x000D   lt div class  container container-table  gt  x000D       lt div class  row vertical-center-row  gt  x000D           lt div class  text-center col-md-4 col-md-offset-4  style  background red  gt TEXT lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    It s a simple example of a horizontally and vertically div centered in all screen sizes

User · Answer

In bootstrap 4 to center the children horizontally  use bootstrap-4 class justify-content-center  to center the children 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  quot d-flex justify-content-center align-items-center quot  style  quot height 100px  quot  gt       lt div class  quot bg-primary quot  gt MIDDLE lt  div gt       lt  div gt   Note  make sure to add bootstrap-4 utilities if this code does not work

User · Answer

Good answer ppollono  I was just playing around and I got a slightly better solution  The CSS would remain the same  i e     html  body   container       height  100      container       display  table      vertical-align  middle     vertical-center-row       display  table-cell      vertical-align  middle      But for HTML    lt div class  container  gt       lt div class  vertical-center-row  gt           lt div align  center  gt TEXT lt  div gt       lt  div gt   lt  div gt    This would be enough

User · Answer

CSS   html  body       height  100       container       height  100       display  flex      justify-content  center      align-items  center      HTML    lt div class  container  gt     lt div gt      example    lt  div gt   lt  div gt    Example fiddle

User · Answer

Here is simple CSS rules that put any div in the center    centered     position  fixed    top  50     left  50     transform  translate -50   -50        https   css-tricks com quick-css-trick-how-to-center-an-object-exactly-in-the-center

User · Answer

Update for Bootstrap 4  Now that Bootstrap 4 is flexbox  vertical alignment is easier  Given a full height flexbox div  just us my-auto for even top and bottom margins      lt div class  container h-100 d-flex justify-content-center  gt       lt div class  jumbotron my-auto  gt         lt h1 class  display-3  gt Hello  world  lt  h1 gt       lt  div gt   lt  div gt    http   codeply com go ayraB3tjSd bootstrap-4-vertical-center    Vertical center in Bootstrap 4

User · Answer

Simplest solution will be adding one blank column in both sides like below      lt div class  row form-group  gt        lt div class  col-3  gt  lt  div gt        lt ul class  list-group col-6  gt         lt li class  list-group-item active  gt Yuvraj Patil lt  li gt       lt  ul gt        lt div class  col-3  gt  lt  div gt     lt  div gt

[css] In a bootstrap responsive page how to center a div

Examples related to css

Examples related to twitter-bootstrap

Examples related to responsive-design