Problem with flexbox column breaking after upgrading from bootstrap 3 to 4

Question

We have updated our website from bootstrap v3 to v4. But our portfolio (tile grid) now has empty space in it (same code). While in Bootstrap v3 it filled up all space nicely with the tiles.

Screenshots:

Incorrect with Bootstrap v4

While before it was shown like this:

Correct with bootstrap v3

Code Examples:

code example with bootstrap v4: https://jsfiddle.net/82esox3v/

code example with bootstrap v3: https://jsfiddle.net/s0qa5u2p/

I have been trying whole day, but really I can't get it to work properly. Does anybody know how to fix this? I suspect that we need to add a CSS property somewhere..

Kind regards,

Bastiaan

Answer 1

Bootstrap code of version-3 is not going to work on version-4. Things have been constantly changing with newer version's especially with flexbox

Your code includes some css like @media-query for (992px) which already comes up with bootstrap class named as lg

I have improved your bootstrap code for version-4 which is working in similar way as it is working with version-3

more HTML with less CSS but still responsive

JSFIDDLE LINK: https://jsfiddle.net/hrj874sg/1/

.blog h4,
.other {
  font-weight: 300;
  margin-top: 0;
  padding-left: 10px;
  padding-top: 32px;
  margin-bottom: 5px;
}

.blog {
  background: orange;
  height: 505px;
}

.other {
  background: lightblue;
  height: 250px;
}

<!-- Bootstrap Version 4.4.1 CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">


<div class="container-fluid">
  <div class="row">
    <div class="col-lg-6 col-12">
      <div class="blog">
        <h4>1</h4>
      </div>
    </div>
    <div class="col-lg-6 col-12">
      <div class="row">
        <div class="col-lg-6 col-12 mt-lg-0 mt-2">
          <div class=" other">
            <h4>2</h4>
          </div>
        </div>
        <div class="col-lg-6 col-12">
          <div class=" other">
            <h4>3</h4>
          </div>
        </div>
        <div class="col-lg-6 col-12">
          <div class=" other">
            <h4>4</h4>
          </div>
        </div>
        <div class="col-lg-6 col-12">
          <div class=" other">
            <h4>5</h4>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-12">
      <div class="other">
        <h4>6</h4>
      </div>
    </div>
    <div class="col-lg-3 col-12">
      <div class="other">
        <h4>7</h4>
      </div>
    </div>
    <div class="col-lg-3 col-12">
      <div class="other">
        <h4>8</h4>
      </div>
    </div>
    <div class="col-lg-3 col-12">
      <div class="other">
        <h4>9</h4>
      </div>
    </div>
  </div>
</div>