0

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.

enter image description here

<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>
halfer
  • 19,471
  • 17
  • 87
  • 173
yavg
  • 2,403
  • 5
  • 33
  • 82

3 Answers3

1

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>
Dhaval Jardosh
  • 6,905
  • 4
  • 25
  • 63
0

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.

Matnagra
  • 39
  • 1
  • 10
0

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

Zim
  • 329,487
  • 83
  • 671
  • 600
  • thanks, but div with text "3" not have the same height of the picture... body with heigh:100% not works? – yavg Apr 23 '18 at 03:46
  • It's not the same height because you used `align-items-center` on the parent row. Remove that at it works: https://www.codeply.com/go/aZnnbWrMRE – Zim Apr 23 '18 at 11:03