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,824
  • 17
  • 99
  • 186
yavg
  • 2,761
  • 7
  • 45
  • 115

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
  • 7,151
  • 5
  • 27
  • 69
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
  • 49
  • 1
  • 11
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

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • 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 – Carol Skelly Apr 23 '18 at 11:03