Best practice to center a div on Bootstrap 4 and use rows within it-Twitter bootstrap

yavg
April 22, 2018
216 views
2 votes
3 Answers

I am practising in Bootstrap 4 and I do not know what rule I have violated for the responsive design. I am looking for a best practice to carry out the image. My idea is to learn.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />

<body>
  <div class="container-fluid h-100" style="border: solid red 1px">
    <div class="row h-100 d-flex   justify-content-center align-items-center contenedor_centrado">
      <div class="col-6">
        <div class="row">
          <div class="col-12 border">
            1
          </div>
          <div class="col-12 border">
            2
          </div>
        </div>
      </div>
      <div class="col-6 border">
        3
      </div>
      <div class="row">
        <div class="col-6 border">4</div>
        <div class="col-6 border">5</div>
      </div>
    </div>
  </div>
</body>

Answers

This is an easy way to solve it:

<body>
<div class="h-50">
</div>
  <div style="border: solid blue 1px" >
  <div class="row">
    <div class="col-6">
      <div class="row">
        <div class="col-12 border">
          1
        </div>
        <div class="col-12 border">
          2
        </div>
      </div>
    </div>
    <div class="col-6 border">
      3
    </div>
  </div>
  <div class="row">
    <div class="col-6 border">4</div>
    <div class="col-6 border">5</div>
  </div>
</div>

</body>

I hope it is usefull.

Solution with just classes.

my-auto class to the inner block will place it in the center.

One problem will still be there:

You will have to stretch the outer container using height:100vh; so it’s stretched to it’s screen size.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="d-flex flex-column" style="height:100vh; border:5px solid red;">
  <div class="d-flex flex-column my-auto" style="border: solid blue 1px">
    <div class="row">
      <div class="col-6">
        <div class="row">
          <div class="col-12 border">
            1
          </div>
          <div class="col-12 border">
            2
          </div>
        </div>
      </div>
      <div class="col-6 border">
        3
      </div>
    </div>
    <div class="row">
      <div class="col-6 border">4</div>
      <div class="col-6 border">5</div>
    </div>
  </div>
</div>

Here is the simplest Bootstrap way using the flexbox classes…

<div class="container-fluid h-100 d-flex flex-column justify-content-center" style="border: solid red 1px">
    <div class="row d-flex justify-content-center contenedor_centrado">
      <div class="col-6">
        <div class="row">
          <div class="col-12 border">
            1
          </div>
          <div class="col-12 border">
            2
          </div>
        </div>
      </div>
      <div class="col-6 border">
        3
      </div>
      <div class="row w-100">
        <div class="col-6 border">4</div>
        <div class="col-6 border">5</div>
      </div>
    </div>
  </div>

https://www.codeply.com/go/aZnnbWrMRE

Also see:
Vertical Align Center in Bootstrap 4
Bootstrap 4. Center Vertical and Horizontal Alignment