如何在bootstrap 4中修复动态图像

I've a working app build in php/JQuery and bootstrap 3. I will convert this to bootstrap 4 and I've issues. In bootstrap 3 the dynamic images from the database were aligned 4 in a row. And if there were more than 4 images it created a new row. In bootstrap 4 the images are only shown in 1 column vertically.

Here is my coding:

getcustomer.php:

$i=$_REQUEST["id_ind"];
$sel="select * from customer_segment where industry_id='".$i."' LIMIT 12";
$qry=mysqli_query($conn, $sel);
while($row=mysqli_fetch_array($qry, MYSQLI_BOTH))
{
  echo '
    <h3><div class="col-12 col-lg-3 col-xl-3  customer_image count" style="position: relative;" id="'.$row[3].'">
        <label class="container1">
            <div class="customer-img" onclick="getdata_cont('.$row[0].')"><?php echo $row_ind["description"];>
                <div class="img-fluid"> <img src="images/'.$row[3].'" class="picture"></div>
                    <div class="on-overlay" id="img-fluid" >
                        <span class="span1">'.$row[1].'</span>
                        <input type="radio" checked="checked" name="radio">
                        <span class="checkmark"></span>
                    </div>
                </div>
            </div>     
        </label>
    </div><h3>';

      } 

?>

index.php:
 <!-- Step 2: Choose customer segment -->
  <div class="row" id="customer_segment_hide">
    <div class="col-md-12 col-8" style="text-align: center;margin-top: 50px;margin-bottom: 37px;">
      <div class="div2 ">
        <h2>2</h2>
      </div>
        <span class="span"><b>Choose Customer Segment </b></span>
        <p class="p1">By clicking on a image below you go to the third step</p>
    </div>

   <div class="container"> 
    <div class="col-md-12 addd">  
      <div class="pppp">
        <p style="color: #FFF;font-size: 17px; text-align:center;margin-bottom:25px"><h4>How might we help?</h4></p>
      </div>
    </div>
  </div><!-- Step 2: Close-->
</div>

<!-- JS: get customers segment --> 
<script>
  function getdata(id_ind)
  {
  $.ajax({
  url:"getcustomer.php",
  // ids= industry_id
  data:{id_ind:id_ind},
  type:'GET',
  success: function(data){
  $('.pppp').html(data);
  }
  });
  }
</script>

style.css:

/* create blue square step 2 & 3 */
.addd{
    background-color: #198bd1;
    position:relative;
    height: 430px;
    margin-bottom: 132px;
}

/* create bigger blue square step 2 when there more then 8 images */
.addd2{
    background-color: #198bd1;
    position: relative;
    height: 670px;
    margin-bottom: 290px;
}

/* Step 2 plot images and defined width */
.pppp{
    display: inline-block;
    width: 100%;
    padding: 30px 0;
}

/* image card size */
.customer-img{
    width:75%;
    margin:0 auto; 
    position:relative;
}

.customer-img img {
    border-radius:20px;
    width:100%;
    z-index: 999;
    height: 235px;
}

.on-overlay{
    display:table;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:235px;
    text-align:center;
    background: rgba(0,0,0,0.3);
    border-radius:20px;
    padding-bottom: 123%;
}
.on-overlay span:not(.checkmark){
    /*line-height: 9;
    vertical-align:middle;
    color:#fff;
    display: table-cell;*/
    position: absolute;
    margin-left: -36%;
    color: #fff;
    text-align: center;
    width: 76%;
    top: 20%;

}
.checkmark {
    position: absolute;
    top: 74%;
    left: 70%;
    height: 25px;
    width: 25px;
    border-radius: 50%;
}

/* Title card */
.span1 {
    display: inline-block;
    font-size: 1.5rem;
    text-align: center;
}

.choose

/* The container */
.container1 {
    display: block;
    position: relative;
    /*padding-left: 35px;*/
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


/* Hide the browser's default checkbox */
.container1 input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* On mouse-over, add a grey background color */
.container1:hover input ~ .checkmark {
}

/* When the checkbox is checked, add a blue background */
.container1 input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container1 input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container1 .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.col-xl-3 {
    width: 25%;
    text-align: center;
}

.os-img-overlay {
    position: absolute;
    background: rgba(34,34,34,.3);
    left: 37px;
    top: 5px;
    border-radius: 30px;
    width: 71%;
    height: 350px;

}
.close {
    cursor: pointer;
    position: absolute;
    top: 7%;
    padding: 12px 16px;
    transform: translate(0%, -50%);
    left: 0;
}
.os-img-title {
    color: #f5f5f5;
    font-family: 'Lato',sans-serif;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 1px;
    text-align: center;
    width: 100%;
    z-index: 2;
    padding: 0 2px;
    line-height: 20px;
    max-width: 175px;
}