In a bootstrap responsive page how to center a div

Question

I need to create a responsive page using bootstrap by positio

Answer 1

CSS:

html,
body {
    height: 100%;
}

.container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

HTML:

<div class="container">
  <div>
    example
  </div>
</div>

Example fiddle

Answer 2

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/

Answer 3

In bootstrap 4

to center the childs horizontally, use bootstrap-4 class

justify-content-center

to center the childs 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

<div class="d-flex justify-content-center align-items-center" style="height:100px;">
    <div class="bg-primary">MIDDLE</div>    
</div>

Note: make sure to add bootstrap-4 utilities if this code does not work

Answer 4

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

Answer 5

In Bootstrap 4, use:

<div class="d-flex justify-content-center">...</div>

You can also change the position depending on what you want:

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

Reference here

Answer 6

Simplest solution will be adding one blank column in both sides like below:

  <div class="row form-group">

    <div class="col-3"></div>

    <ul class="list-group col-6">
      <li class="list-group-item active">Yuvraj Patil</li>
    </ul>

    <div class="col-3"></div>
  </div>