how to fix dynamic images in bootstrap 4 - php

Question

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;
}